css 超出区域省略号
时间: 2023-12-13 17:33:51 浏览: 41
以下是两种CSS实现超出区域省略号的方法:
1.单行文本超出省略号
```css
.box {
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
width: 100px;
}
```
解释:将文本框的宽度设置为固定值,然后使用`text-overflow: ellipsis`属性来实现超出部分的省略号显示。
2.多行文本超出省略号
```css
p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
```
解释:将文本框的高度设置为固定值,然后使用`overflow: hidden`属性来隐藏超出部分。接着使用`::after`伪元素来添加省略号,并使用绝对定位将其放置在文本框的底部右侧。