-webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: justify; ios省略号会和文字重合

这个问题的出现是因为在iOS系统中，-webkit-line-clamp属性会导致省略号的位置不正确。解决这个问题的方法是给文本容器添加一个额外的内边距(padding)，然后将设置文本容器的line-height属性与其高度相同，这样就可以让省略号正确地显示在文本的底部。

例如，你可以添加以下CSS样式：

.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: justify;
  overflow: hidden;
  padding-bottom: 1.2em; /*添加额外内边距*/
  line-height: 1.2em; /*设置行高与内边距相同*/
}

这样就可以解决iOS系统中省略号和文字重合的问题了。

相关问题

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

回答: 这段代码是用来实现文本溢出省略号显示的。具体来说，overflow: hidden;表示溢出部分隐藏，-webkit-line-clamp: 2;表示显示2行文本，text-overflow: ellipsis;表示文本溢出时用省略号表示，display: -webkit-box;表示将对象作为弹性盒子模型显示，-webkit-box-orient: vertical;表示垂直排列子元素。这些属性的组合可以实现文本溢出省略号的效果。\[1\]
#### 引用[.reference_title]
- *1* [-webkit-box-orient:vertical 失效](https://blog.csdn.net/Jioho_chen/article/details/108311952)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？](https://blog.csdn.net/dyk11111/article/details/128197065)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。](https://blog.csdn.net/weixin_44948981/article/details/130368549)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;

These CSS properties work together to create a "text truncation" effect, where text that exceeds a certain number of lines is hidden and replaced with an ellipsis.

- `overflow: hidden;` ensures that any text that exceeds the specified height or width of an element is hidden from view.
- `display: -webkit-box;` sets the display type of the element to a "flex box" style, which allows for the use of the `-webkit-line-clamp` property.
- `-webkit-box-orient: vertical;` specifies that the flex box should be oriented vertically, stacking the child elements on top of each other.
- `-webkit-line-clamp: 2;` limits the number of text lines that can be displayed to 2, and any text that exceeds that limit is truncated and replaced with an ellipsis.

Note that the `-webkit` prefix is used for these properties because they are currently only supported in WebKit-based browsers (such as Safari and Chrome), and may not work in other browsers.