要实现
CSS多行文本溢出显示省略号的效果，可以使用以下方法：
1. 首先，需要设置
容器的固定宽度和高度，例如通过设置`.wrap`的`width`和`height`属性来确定
容器的大小。
2. 然后，需要对
文本内容的
容器设置一些样式，例如`.content`类。可以使用`overflow: hidden;`来
隐藏超出
容器尺寸的内容。使用`text-overflow: ellipsis;`来在
文本溢出时
显示省略号。
3. 如果想要
显示多行文本并且超出部分
显示省略号，可以使用`-webkit-line-clamp`属性来设置行数。例如，可以使用`-webkit-line-clamp:
3;`来限制
显示文本的行数为
3行。但是请注意，这个属性只在WebKit浏览器中生效，其他浏览器可能需要添
加一些兼容性样式。
4. 最后，你可以通过设置`display: -webkit-box;`和`-webkit-box-orient: vertical;`来使
文本在
多行情况下垂直排列。
示例代码如下：
```
<div class="wrap">
<div class="content">
测试数据：
css多行文本溢出显示省略号，
多行文本溢出显示省略号--明天也要努力
</div>
</div>
<style>
.wrap {
width: 200px;
height:
300px;
}
.content {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:
3;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>
```
以上代码将在一个宽度为200px，高度为
300px的
容器中
显示多行文本。超出
3行的部分将被
隐藏，并以
省略号"..."
显示。<span class="em">1</span><span class="em">2</span><span class="em">
3</span>
#### 引用[.reference_title]
- *1* *2* [
CSS中 设置( 单行、
多行 )超出
显示省略号](https://blog.youkuaiyun.com/ZYS10000/article/details/127607497)[target="_blank" data-report-click={"spm":"1018.2226.
3001.96
30","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^v9
3^chatsearchT
3_2"}}] [.reference_item style="max-width: 50%"]
- *
3* [
CSS实现单行、
多行文本溢出显示省略号（…）](https://blog.youkuaiyun.com/qq_4
3000
315/article/details/125
31
3649)[target="_blank" data-report-click={"spm":"1018.2226.
3001.96
30","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^v9
3^chatsearchT
3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，并提供了具体的样式代码。
扫一扫
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
