当单行文本超出容器长度时不换行显示，而是在行末隐藏剩余内容显示省略号；或多行文本显示在最后一行行末隐藏剩余内容显示省略号。方法如下：

单行文本省略显示

文本在一行内显示，行末隐藏剩余内容显示省略号。
涉及的 CSS 属性有：

• white-space：nowrap // 文本溢出时强制不换行，此属性是下面两个属性生效的基础！
• overflow：hidden // 文本溢出时隐藏溢出部分，此属性是下面属性生效的基础！
• text-overflow：ellipsis // 控制文本溢出时显示省略号，要达到此效果这三个属性缺一不可！

最后再加上控制宽度的属性就可以实现单行文本省略显示效果了。

完整示例如下：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;

多行文本省略显示

多行文本在指定的行数最后一行末尾隐藏剩余内容显示省略号。
涉及的 CSS 属性有：

• display: -webkit-box; // 将对象设置为单行盒子模型显示
• -webkit-box-orient: vertical; // 设置伸缩盒对象子元素排列方式
• -webkit-line-clamp: 3; // 指定在一个块元素显示的文本行数
• overflow: hidden; // 用省略号替代超出范围的文本

完整示例如下：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;  

-webkit-line-clamp 是一个不规范的属性，它不在 CSS 规范草案中。只有 webkit 内核的浏览器才支持这个属性，兼容性不好。