如何让文本只显示两行——块级文字省略

栏目: CSS · 发布时间: 7年前

内容简介：在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定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的方式显然更加方便。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

数据库系统实现

加西亚-莫利纳(Hector Garcia-Molina)、Jeffrey D.Ullman、Jennifer Widom / 杨冬青、吴愈青、包小源 / 机械工业出版社 / 2010-5 / 59.00元

《数据库系统实现(第2版)》是斯坦福大学计算机科学专业数据库系列课程第二门课的教科书。书中对数据库系统实现原理进行了深入阐述，并具体讨论了数据库管理系统的三个主要成分——存储管理器、查询处理器和事务管理器的实现技术。此外，第2版充分反映了数据管理技术的新进展，对内容进行了扩充，除了在第1版中原有的“信息集成”一章（第10章）中加入了新的内容外，还增加了两个全新的章：“数据挖掘”（第11章）和“数据......一起来看看《数据库系统实现》这本书的介绍吧!

码农工具

HTML 压缩/解压工具

在线压缩/解压 HTML 代码

SHA 加密

SHA 加密工具