html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法-CSDN博客
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
单行文本
.box{
width: 200px;
background-color: aqua;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
多行文本
1.利用-webkit-line-clamp属性
.box{
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border:solid 1px black;
}
缺点仅适用于webkit内核或移动端页面。在火狐ie等浏览器并不支持。
2.用伪元素模拟实现
设定固定宽高多余部分隐藏在结尾用包含省略号(…)的元素覆盖部分内容。
这里用一个包含了省略号且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
.box{
position:relative;
line-height:1.4em;
height:4.2em;
overflow:hidden;
}
.box::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 -20px 1px 45px;
background-color:white;
}
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |