1. 单行文字溢出省略

只需添加三行代码即可：

overflow: hidden; /* 超出的文本隐藏 */text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。 */white-space: nowrap; /* 文本不换行 */

举例：

CSS：

.demo {width: 200px;height: 20px;border: 2px solid #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

2. 多行文字溢出省略

需要添加4行CSS代码：

display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-line-clamp: 3; /* 表示显示的行数，不是CSS规范属性 */overflow: hidden; /* 超出的文本隐藏 */

举例：

CSS：

.demo {width: 200px;height: 64px;border: 2px solid #000;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}