标签导航：

如何在vue 2.0移动端应用中兼容多行文本溢出省略？

解决Vue 2.0移动端多行文本溢出显示问题

在Vue 2.0移动端项目中，处理多行文本溢出并显示省略号常常会遇到兼容性问题。 常见的CSS样式如下：

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /* 显示行数 */
-webkit-box-orient: vertical;

然而，在某些iOS设备（例如iPhone 15 Pro）上，上述样式可能只显示单行省略，无法实现多行文本溢出省略的效果。

经过测试，只需添加一行CSS代码即可完美解决此问题：

display: -webkit-box;

最终完整的CSS样式如下：

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /* 显示行数，可根据需要调整 */
-webkit-box-orient: vertical;

通过添加 display: -webkit-box; ，强制元素使用WebKit的弹性盒模型，从而确保 -webkit-line-clamp 属性在所有支持的设备上都能正确工作，实现多行文本溢出省略效果。 现在，即使在iPhone 15 Pro等设备上，也能正常显示多行文本溢出省略了。