css 3行展示，超出显示省略号

同样，你可以使用CSS的`-webkit-line-clamp`属性来实现文本只显示指定行数并省略超出部分的效果。同时，需要配合使用`display`属性设置为`-webkit-box`和`-webkit-box-orient`属性设置为`vertical`来实现垂直排列的效果。

以下是一个示例代码：

.box {
  width: 200px;
  height: 3.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

其中，`.box`为盒子的类名，设置了盒子的宽、高、溢出隐藏和省略号。`display: -webkit-box;`表示使用弹性盒子模型，`-webkit-line-clamp: 3;`表示限制文本显示为3行，`-webkit-box-orient: vertical;`表示垂直排列。这样，当文本超出3行时，就会自动显示省略号了。需要注意的是，该属性只在WebKit内核的浏览器中生效，如Chrome、Safari等。

相关问题

css第二行超出显示省略号

要实现CSS中第二行超出显示省略号的效果，可以使用以下代码片段:

width: 295px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

这段代码中，我们设置了一个固定的宽度（295px），超出部分会被隐藏。同时使用`-webkit-line-clamp`属性来指定只显示两行文本，并使用`-webkit-box-orient`属性将文本垂直排列。最后使用`text-overflow: ellipsis`来显示省略号。这样就可以实现CSS中第二行超出显示省略号的效果了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [css 文本超出2行就隐藏并且显示省略号](https://blog.csdn.net/bing0728004/article/details/51509435)[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: 50%"]
- *2* *3* [css实现第二行超出显示省略号](https://blog.csdn.net/weixin_42369612/article/details/118929860)[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: 50%"]
[ .reference_list ]

css 段落超出3行显示省略号

想要实现段落超出3行显示省略号的效果，可以使用CSS的`-webkit-line-clamp`属性。但是，`-webkit-line-clamp`只对单行文本生效，对于多行文本需要进行一些特殊处理。

以下是一个实现段落超出3行显示省略号的示例代码：

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

其中，`.box`为段落的类名，设置了段落的显示方式为弹性盒子模型，限制文本显示为3行，垂直排列。`overflow: hidden;`表示超出部分隐藏，`text-overflow: ellipsis;`表示超出部分用省略号代替。这样，当文本超出3行时，就会自动显示省略号了。

需要注意的是，`-webkit-line-clamp`只在WebKit内核的浏览器中生效，如Chrome、Safari等。如果需要兼容其他浏览器，可以考虑使用JS来实现该效果。