首先，分析超出内容有两种情况，单行内容超出和多行内容超出，以下逐一说明：
单行内容操作：
单行操作必须有width属性，就是元素要有宽和高的限制才可以，具备以上基本条件之后，编写以下代码
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
此时，即可看到单行文本超出显示省略号的效果。
多行内容操作：
多行文本超出省略早期是没有该写法的，本文使用的是css3对WebKit的拓展写法，需要注意，该方法只适用于WebKit浏览器和移动端页面。
以下为关键代码片段：
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
此时，即可看到多行文本超出显示省略号的效果。
简单解释：
首先设置元素为弹性盒模型，也即是display:box,然后设置限制文本的行数，使用line-clamp属性，最后设置弹性盒子内容的排列方式box-orient，别忘却了还需要添加超出隐藏属性设置overflow: hidden。
以上就是设置CSS中超出的文本内容显示省略号的方法！
CSS中超出的文本内容显示省略号
原文地址：https://www.cnblogs.com/laowangJames/p/9597120.html