vue中文字超出显示省略号的两种情况，css实现文字超出显示省略号

本文介绍: vue 解决文本当行超出显示省略号，以及多行超出显示省略号的两种情况

vue 项目开发中常常出现文本太长超出后需要实现显示省略号的需求，而最为常见的就是单行和多行这两种情况，以下就简单的做个记录

一、单行显示省略号（这种情况非常常见，容器固定了宽度，而文本内容超出）

代码如下：

&lt;template&gt;
	<div&gt;
		<divclass="box"&gt;aaaaa</div&gt;
	</div&gt;
</template&gt;
<style&gt;
	.box {
		width: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style&gt;

效果如下：

二、多行显示省略号（容器设置了宽度，文本超出，末尾显示省略号）

注意：英文无效

代码如下：

<template>
	<div>
		<div class="box">好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好</div>
	</div>
</template>
<style>
	.box {
		overflow: hidden;
		text-overflow: ellipsis;
		width: 200px;
		/*将对象作为弹性伸缩盒子模型显示*/
		display: -webkit-box;
		/*限制文本行数*/
		-webkit-line-clamp: 2;
		/*子元素的排列方式*/
		-webkit-box-orient: vertical;
		/*将对象作为弹性伸缩盒子模型显示*/
	}
</style>

效果如下：

补充：以下还用一种通过添加伪元素实现显示省略号，同样也是不适用于英文，具体实现的代码如下

<template>
	<div>
		<div class="box">好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好</div>
	</div>
</template>
<style>
	.box {
		margin: 100px auto;
		width: 200px;
		position: relative;
		height: 40px;
		line-height: 20px;
		overflow: hidden;
	}

	.box::after {
		content: '...';
		position: absolute;
		bottom: 0;
		right: 0;
	}
</style>