css超出3行文字显示...

要实现超出3行文字显示省略号的效果，可以使用以下CSS样式：

p {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

其中，`width`属性设置了元素的宽度为100px，`overflow`属性为隐藏超出元素的内容，`text-overflow`属性设置了超出部分的显示为省略号，`display`属性为`-webkit-box`，`-webkit-line-clamp`属性设置了最多显示3行文本，`-webkit-box-orient`属性为垂直方向排列。

如果要实现宽度随着文字长度自适应，可以使用`width: fit-content;`样式。

综上所述，要实现超出3行文字显示省略号的效果，可以使用上述CSS样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [css 控制 段落 超出三行的部分显示...](https://blog.csdn.net/marko_zheng/article/details/85321194)[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文字长度实现宽度自适应、显示三行超出省略号](https://blog.csdn.net/DragonOfMoon/article/details/124038676)[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 ]