多行文本截断并出现省略号纯CSS解决方案

最新推荐文章于 2024-06-23 16:00:00 发布

HongShaoRouer

最新推荐文章于 2024-06-23 16:00:00 发布

阅读量7.2k

点赞数 2

分类专栏：上班博客文章标签： css

本文链接：https://blog.csdn.net/ajhongshaorou/article/details/51182116

版权

ps:博主上班半个月啦一直在忙万事开头难。。
前几天碰到一个CSS的问题多行文本的截断还不能使用JS来做找了又找终于发现国外有个非常好的想法来跟大家分享一下，具体网站忘记了。。。如果有记得的发给我一下，毕竟是人家的创意。。。
如下图：
遇到的问题

大家都知道，text-overflow是实现单行文本溢出隐藏的方式

    overflow: hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*文本溢出省略号*/
    white-space: nowrap;/*不换行*/

通过上述代码再加上对宽度的设定，可以实现如：

这里写图片描述

这样的标题单行隐藏，看上去不错~

在网上可以查找到一些方式来进行多行隐藏的处理，如：http://www.css88.com/archives/5206
这里面写了几种方式，其中对webkit内核的浏览器的处理方式可以学习一下。
今天介绍的方案更取巧一些，兼容性也会更好一些。
废话不说了，上代码
html代码

    <div class="wrap">
       <

关注