css文本溢出2行省略号
时间: 2023-10-20 21:34:01 浏览: 34
要实现CSS文本溢出2行显示省略号,可以使用CSS3属性。可以将内容放置在一个具有固定宽度的容器中,并设置overflow属性为hidden,这样超出容器宽度的文本部分将被隐藏。然后使用text-overflow属性设置为ellipsis来显示省略号。接下来使用display属性设置为-webkit-box,-webkit-box-orient属性设置为vertical,-webkit-line-clamp属性设置为2,这样可以限制显示的行数为2行,超出的部分将以省略号表示。以下是示例代码:
```
<div class="line style">内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分</div>
<style>
.style {
width: 200px;
background: pink;
}
.line {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
```
通过以上代码,可以将文本的行数限制为2行,并在超出部分显示省略号。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS文本设置超出2行显示省略号](https://blog.csdn.net/weixin_44582045/article/details/125203749)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [CSS文本超过2行省略号(...)显示](https://blog.csdn.net/guozhangqiang/article/details/102581681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]