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*

中 设置( 单行、

)超出

[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%"]

- *3*

实现单行、

（…）[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 ]

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/13170.html