css ellipsis

CSS的ellipsis属性用于实现文本的截断显示。ellipsis属性可以通过设置overflow属性为hidden以及text-overflow属性为ellipsis来实现文本超出自动截断的效果。同时，还可以使用display属性的-webkit-box值和-webkit-line-clamp值来实现多行文本显示省略号的效果。

例如，可以使用以下代码实现文本超出自动截断的样式：

.truncate-text-4 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

这将使文本在超过指定行数后自动截断，并在末尾添加省略号。

另外，可以通过去除white-space属性并结合display属性的-webkit-box值和-webkit-line-clamp值来实现多行文本显示省略号的效果。例如：

.truncate-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

这将使文本在超过指定行数后自动截断，并在末尾添加省略号。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS ellipsis 与 padding 结合时的问题详解](https://download.csdn.net/download/weixin_38723513/13682230)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [css3属性text-overflow：ellipsis的用法与注意之处](https://blog.csdn.net/weixin_38098192/article/details/88528849)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [CSS3属性之text-overflow:ellipsis详解](https://blog.csdn.net/m0_49515138/article/details/128674684)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]