单/多行文本溢出显示小圆点/省略号

1.单行文本溢出显示三个小圆点/省略号

width: 100px; /*限制元素宽度*/
overflow: hidden; /*文本超出隐藏*/
text-overflow: ellipsis; /*文本超出显示省略号*/
white-space: nowrap; /*超出的空白区域不换行*/

一定要记得限制宽度

2.多行文本溢出显示三个小圆点/省略号

width:300px; /*限制元素宽度*/
overflow: hidden; /*文本超出隐藏*/
display:-webkit-box; /*盒子模型微弹性伸缩模型*/
-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
-webkit-line-clamp: 3; /*文本显示3行*/

一定要限制宽度

上面这样写，如果是英文，就不会显示小圆点了，所以可以加一个word-break: break-all