资讯专栏INFORMATION COLUMN

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

BetaRabbit / 2193人阅读

摘要:在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。

在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。

单行文字的省略

单行文字省略比较简单。关键代码如下:




    

春天,又称春季,是四季中的第一个季节,指立春至立夏期间,含节气有立春、雨水、惊蛰、春分、清明、谷雨

最终的效果是:

当一行中的文本不固定的时候,可以设置一个max-width,当超过这个最大宽度,就进行省略,其他的时候不省略。常见应用如:历史搜索记录里面的记录显示。

多行文字的省略

多行文字的省略可以用css来做,也可以用js来做。先来看看css的做法。

css

多行文字的省略主要用到-webkit-line-clamp属性,主要用来限制在一个块元素显示的文本的行数。但是这个属性不规范,要实现该效果,必须结合其他外来的WebKit属性。

来看具体实现:



    
feeeeeeeeeeee菲菲姐而非减肥法金额菲艾斯阿金费分解分解发黑发黄三板斧非法即使对方是反黑反腐的胜利会计法撒开了分解机菲菲姐宽带连接覅记得发分解飞机佛山飞机奥利弗降低房价大幅eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

最终显示的效果如下:

这个省略的效果也可以用js来做:

js

js的做法适用于最多适配多少个字符的情况,但是如果想控制显示几行的话,css的方式显然更加方便。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117376.html

相关文章

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

    摘要:在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。 在页面显示中我们经常会需要进行省略,比如简介里面的省略,比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。 单行文字的省略 单行文字省略比较简单。关键代码如下: .single { width: 280px; ...

    zollero 评论0 收藏0
  • 【效果实现】在照片上面显示一段文字,最多两行,多余部分用省略号表示

    摘要:思路照片上面显示文字,怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出 思路:照片上面显示文字,怎么实现呢?将照片作为div的背景呀! 效果图: showImg(https://segmentfault.com/img/bVbuV...

    PascalXie 评论0 收藏0
  • 【效果实现】在照片上面显示一段文字,最多两行,多余部分用省略号表示

    摘要:思路照片上面显示文字,怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出 思路:照片上面显示文字,怎么实现呢?将照片作为div的背景呀! 效果图: showImg(https://segmentfault.com/img/bVbuV...

    alaege 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<