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

2019年9月13日 129次阅读 来源: 吴小双

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

    原文作者：吴小双
    原文地址: https://segmentfault.com/a/1190000018201514
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞