文字和图标并排展示，最多两行，超出范围省略号显示后跟小图标

实现效果

方法一：css实现

注意项：带斑马纹的表格慎用，会不好看

html结构

<div class="content-wrapper"
	 style="width: 370px">
			<div class="content">
				<span class="iconfont icon-new icon-1"
					  style="color: #ec2f2f"></span>
				<span>{{ title }}</span>
				<span class="iconfont icon-new icon-2"
					  style="color: #ec2f2f"></span>
			</div>
</div>

css样式

	// 必须设置flex布局撑开容器，
	// 否则content的before元素高度calc(100% - 18px)不会生效		
	.content-wrapper {
		position: relative;
　      display:flex;
		overflow: hidden;
	}

	.content {
		max-height: 45px;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	// 撑开高度，确保icon-1位于文本右下方
	.content::before {
		content: '';
		display: block;
		float: right;
		width: 0px;
		height: calc(100% - 18px);
	}

	// 用于文本未超出时遮挡icon-1
    // 因为此处加了背景色遮挡，所以在斑马纹的表格里慎用
	.content::after {
		position: absolute;
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		background: #ffffff;
	}

	// 文本超出后显示的图标
	.icon-1 {
		width: 27px;
		background-size: cover;
		float: right;
		clear: both;
		display: block;
		transform: translateY(-6px);
	}

	// 文本未超出时显示的图标
	.icon-2 {
		position: relative;
		display: inline-block;
		width: 27px;
		background-size: cover;
		margin-left: 10px;
		transform: translateY(0px);
	}

	// 文本未超出，且文本恰巧在某行末尾结束，遮挡处于正下方的icon-1
	.icon-2::after {
		content: '';
		position: absolute;
		background: #ffffff;
		left: 0px;
		bottom: -40px;
		height: 40px;
		width: 40px;
	}

 方法二：借助vue-clamp插件

1、下载依赖

      npm install vue-clamp --save

2、全局注册

     import VueClamp from 'vue-clamp'

     Vue.component('VueClamp', VueClamp)

3、使用方法

需要注意的是，可以在组件里直接插入文本，但是不能直接在组件里使用html标签，需要借助before、after插槽

	<VueClamp
			autoresize
			:max-lines="2"
			style="word-break: break-all">
			{{ title }}
            <template #after>
					<i class="iconfont icon-new ml-1"
					   style="color: #ec2f2f"></i>
			</template>
   </VueClamp>