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

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

智能优化算法及其应用

王凌 / 清华大学出版社 / 2001-10 / 22.00元

智能优化算法及其应用，ISBN：9787302044994，作者：王凌著一起来看看《智能优化算法及其应用》这本书的介绍吧!

码农工具

HTML 编码/解码

HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具

HSV CMYK互换工具