当前位置: 知识网 > 建站问题

css单行文本溢出省略号(css多行文本溢出隐藏)

知识网2022年02月20日 10:21原创

CSS实现单行和多行文本溢出显示省略号……

1.CSS实现单行文本溢出显示省略号……

.ellipsis{ //单行文本溢出

overflow: hidden;

text-overflow:ellipsis; //文本溢出显示省略号

white-space:nowrap; //文本不会换行(单行文本溢出)

width:130px;

background-color: red;

2.多行文本溢出显示省略号…

.mult_line_ellipsis{ //多行文本溢出

overflow: hidden;

text-overflow:ellipsis; //文本溢出显示省略号

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

width:130px;

background-color:cornflowerblue;

3.跨浏览器兼容的方法

.imitate_ellipsis{

position:relative;

line-height:1.4em;

height:2.8em;

overflow:hidden;

width:130px;

background-color: orange;

}

.imitate_ellipsis::after{

content:&...&;

font-weight:bold;

position:absolute;

bottom:0;

right:0;

padding-left:20px;

background: -webkit-linear-gradient(left, transparent, #fff 62%);

background: -o-linear-gradient(right, transparent, #fff 62%);

background: -moz-linear-gradient(right, transparent, #fff 62%);

background: linear-gradient(to right, transparent, #fff 62%);

}

浏览器兼容伪类写法css溢出部分,可以跨浏览器,提高了兼容性。

很赞哦!(11)

发表高见 (请对您的言行负责)
2022年02月19日 19:00,回答 by_淘气宝宝:
亲自测试了,第一,第二种方法好用,第三种方法不好用,跨啥浏览器,根本就不好用,标题建议使用第一种方法,标题下面的文字简介之类的建议使用第二种方法,width可以去掉,背景可以去掉就好了。

©芃睿知识网 版权所有 2012-2022 www.shsongjiang.com

备案号:赣ICP备2022001527号-1