文本溢出显示省略号
2.1 、单行文本溢出显示省略号
方法一:
/* 文本强制不换行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 溢出显示省略号 */
text-overflow: ellipsis;
方法二:
.box {
width: 200px;
line-height:30px;
height:30px;
background: red;
position:relative;
text-align:justify;
overflow: hidden;
padding-right: 17px;
}
.box::after{
content:"...";
position:absolute;
right:0;
bottom:0;
/*如果需要在省略号右侧增加更多的距离需要调这个*/
width:1em;
}
2.2、多行文本溢出显示省略号
方法一:after实现
.box {
width: 200px;
height:90px;
line-height:30px;
border:1px solid red;
position:relative;
text-align:justify;
overflow: hidden;
padding-right: 17px;
}
.box::after{
content:"...";
position:absolute;
right:0;
bottom:0;
width:1em;
}
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
说明:
将height设置为line-height的整数倍,防止超出的文字露出
给p::after添加渐变背景可避免文字只显示一半
由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after