文字溢出省略号显示（用此属性的容器不能使用padding，否则内容会溢出）

html

<div>
但愿他年相见，时光如昨，你依旧温柔的看着我，陪我吃我最爱的冰淇淋，述说那些散落的青春。但愿他年相见，时光如昨，你依旧在旧年彼岸，陪我听风赏月，看漫天繁星。但愿他年相见，时光如昨，微风徐徐;你和我在海边奔跑，倾听潮起时海浪拍打礁石的声音。但愿他年相见，时光如昨，阳光明媚，我们不再难过，不再悲伤，也不再沉默，依旧像如从前那般自然。
</div>

1、单行

div{
overflow:hidden; 文字溢出隐藏
text-overflow:clip : 不显示省略标记（...），而是简单的裁切
text-overflow:ellipsis : 当对象内文本溢出时显示省略标记（...）
}

2、文字超过两行省略号显示

div{
display: -webkit-box;

overflow: hidden;

text-overflow: ellipsis;

word-wrap: break-word;

white-space: normal !important;

-webkit-line-clamp: 2;//控制显示行数

-webkit-box-orient: vertical;
}

注意：
一、仅定义text-overflow:ellipsis; 不能实现省略号效果。
二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果
三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果：
四、若想在Td 里使用此效果，要把当前的table的样式定义为 table-layout:fixed,并为单元格Td 设置宽度；否则单元格仍然会随着字的长度变长 。

vue+elementui

https://www.cnblogs.com/97pkp/p/12895693.html