共计 1168 个字符，预计需要花费 3 分钟才能阅读完成。
在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定 div 中字数超过限制之后的省略。我们可以用 css 轻松做到。
单行文字的省略
单行文字省略比较简单。关键代码如下：
<style>
.single {
width: 280px;
text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
white-space: nowrap; /* 段落中的文本不进行换行 */
overflow: hidden; /* 溢出部分隐藏 */
border:1px solid red;
}
</style>
<body>
<p class=”single”> 春天，又称春季，是四季中的第一个季节，指立春至立夏期间，含节气有立春、雨水、惊蛰、春分、清明、谷雨 </p>
</body>
最终的效果是：
当一行中的文本不固定的时候，可以设置一个 max-width，当超过这个最大宽度，就进行省略，其他的时候不省略。常见应用如：历史搜索记录里面的记录显示。
多行文字的省略
多行文字的省略可以用 css 来做，也可以用 js 来做。先来看看 css 的做法。
css：
多行文字的省略主要用到 -webkit-line-clamp 属性，主要用来限制在一个块元素显示的文本的行数。但是这个属性不规范，要实现该效果，必须结合其他外来的 WebKit 属性。
来看具体实现：
<style>
/* 让文字只显示 2 行 */
.main-agency {
width: 280px;
overflow: hidden;
text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
display: -webkit-box; /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 2; /* 文本需要显示多少行 */
}
</style>
<body>
<div class=”main-agency”>feeeeeeeeeeee 菲菲姐而非减肥法金额菲艾斯阿金费分解分解发黑发黄三板斧非法即使对方是反黑反腐的胜利会计法撒开了分解机菲菲姐宽带连接覅记得发分解飞机佛山飞机奥利弗降低房价大幅 eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</body>
最终显示的效果如下：
这个省略的效果也可以用 js 来做：
js：
<script>
function subEllipsis(content) {
content = content.length>24 ? content.substring(0,23)+’…’ : content
}
</script>
js 的做法适用于最多适配多少个字符的情况，但是如果想控制显示几行的话，css 的方式显然更加方便。
