内容简介：在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。单行文字省略比较简单。关键代码如下：最终的效果是：
在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定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的方式显然更加方便。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- _前端-溢出文本显示省略号
- 多行文本加省略号的处理方法
- [译]CSS高级技巧:自动省略左侧文本
- vue-ellipsis，文本省略插件首版发布
- 浅谈移动端过长文本溢出显示省略号的实现方案
- 移动端的text-overflow多行文本溢出显示省略号(…)
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
一只小鸟告诉我的事
[美]比兹·斯通 / 顾雨佳 / 中信出版社 / 2014-11 / 59.00元
比兹•斯通，无疑是自乔布斯后的又一个硅谷奇迹！ 70后的他，出身贫苦，一无所有，却又特立独行，充满智慧。从他这本自传中，我们知道他和乔布斯一样，大学都没读完就辍学做了一名图书封面设计师，然后创建了赞架（Xanga）网站，又进了谷歌。在经济上打了翻身仗后，他毅然放弃了安逸的生活，从零开始，和朋友创建了世界最知名的社交平台推特（Twitter）。当推特奇迹般地改变着世界时，他又悄然离去，创建了自......一起来看看 《一只小鸟告诉我的事》 这本书的介绍吧!
