如何css 实现多元素同行且换行，标签和文字同行且换行省略号。

css实现如下图功能，实现两个标签且要与文字同行，并且超出两行省略号。 不多说上代码

<template>
	<view class="content">
		<view class="root_card">

			<view class="tag mr_4">
				<view class="box">
					<image class="logo" src="/static/logo.png" mode="heightFix"></image>
					<text class="text">{{title}}</text>
				</view>
			</view>
			<view class="tag mr_4">
				<view class="box">
					<image class="logo" src="/static/logo.png" mode="heightFix"></image>
					<text class="text">{{title}}</text>
				</view>
			</view>
			<text>
				{{desc}}
			</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				desc: '这是一段超过两行的文本内容。这是一段超过两行的文本内容。这是一段超过两行的文本内容。'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		padding: 24rpx;
	}

	.root_card {
		line-height: 48rpx;
		/* 一行超出 inline-block;*/
		// display: inline-block;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: normal;
		/* 多行超出 -webkit-box;*/
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 控制显示的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tag {
		display: inline-block;
		height: 48rpx;
		background-color: #ff0000;
		border-radius: 12rpx;
		padding: 0 4rpx;
	}

	.mr_4 {
		margin-right: 8rpx;
	}

	.box {
		display: flex;
		align-items: center;

		& .logo {
			height: 20rpx;
		}

		& .text {
			display: inline-block;
		}
	}
</style>

代码效果

需要注意的是标签的高度，高度必须是设置的行高。否则会出现高度不起的情况！！

换行一行比较好处理，多行需要使用display: -webkit-box;