css 多行展示,超出盒子显示省略号
时间: 2023-06-28 07:08:05 浏览: 90
微信小程序实现多行文字超出部分省略号显示功能
5星 · 资源好评率100%
你可以使用CSS的`text-overflow`属性来实现文本超出盒子显示省略号的效果。同时,需要配合使用`white-space`属性来设置文本的换行方式,以及`overflow`属性来控制盒子中文本内容的溢出情况。
以下是一个示例代码:
```css
.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
其中,`.box`为盒子的类名,设置了盒子的宽、高、边框和溢出隐藏。`text-overflow: ellipsis;`表示超出部分用省略号代替。`white-space: nowrap;`表示文本不换行。这样,当文本超出盒子的宽度时,就会自动显示省略号了。
阅读全文