文本多行省略号（CSS最优方案）
2021-03-04 20:27
标签：lips idt 超过 兼容 pre 绝对定位 span 位置 text Float定位溢出隐藏 优点： 缺点： 代码如下： 原理： 文本多行省略号（CSS最优方案） 标签：lips idt 超过 兼容 pre 绝对定位 span 位置 text 原文地址：https://www.cnblogs.com/yinghuochongfighter/p/12912030.html
div class="ellipses-div">
span class="ellipses-text">这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。span>
div>
.ellipses-div{
line-height: 20px;
max-height: 40px;
overflow: hidden;
width: 300px;
&:before {
float: left;
content: ‘‘;
height: 40px;
width: 22px
}
.ellipses-text{
float: right;
width: 100%;
margin-left: -22px;
// word-break: break-all;
}
&:after {
float: right;
content: ‘...‘;
width: 22px;
height: 20px;
position: relative;
left: 100%;
transform: translate(-100%, -100%);
padding-left: 8px;
}
}