html字数省略号代替,html文字两行后，就用省略号代替剩下的

html文字两行后，就用省略号代替剩下的

一、总结

一句话总结：

实现原理很简单，将box的高度设置为行高的两倍，超出之后隐藏，这样就只有两行了，然后再用after属性绝对定位在第二行后面加几个点 ...

.style2{

position:relative;

line-height:21px;

height:42px; /*height是line-height的整数倍，防止文字显示不全*/

overflow:hidden;

}

.style2::after {

background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);

bottom:;

content: "...";

padding: 0 5px 1px 30px;

position: absolute;

right:;

}

1、一行截断效果？

注意设置宽高，剩下的就是记住用white-space(不换行)，overflow(超出部分隐藏)，text-overflow(隐藏使用的替代符号)

.font_cut{

width: 100%;

white-space:nowrap;

overflow:hidden;

text-overflow: ellipsis;

}

2、after属性里面如何指定内容？

content: "...";

.style2::after {

background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);

bottom:;

content: "...";

padding: 0 5px 1px 30px;

position: absolute;

right:;

}

3、after属性里面可以绝对定位么？

可以，操作after属性就和操作普通样式一样

<