vue.js - vue2.0 多行溢出省略在移动端如何兼容？

Question

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

在iphone 15pro手机上显示的是单行溢出省略

各位大佬，在移动端如何兼容多行溢出省略呢？

Answer 1

https://vue-clamp.vercel.app/?lang=zh

Answer 2

我这边测试在 Safari on iOS 中是可以正确预览到效果的。在线预览Demo

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

兼容性的话，也是支持的 �� CSS line-clamp | Can I use... Support tables for HTML5, CSS3, etc

所以检查一下你的样式代码，可能缺少兼容性前缀之类的。
笔记 - CSS 中的文字截断

Answer 3

尝试加上

display: -webkit-box;/* 弹性伸缩盒子模型显示 */

Answer 4

首先，你需要明白的是，你所提供的 CSS 样式在大多数现代浏览器中是用来实现多行文本溢出省略的，这是完全正确的。然而，你在 iPhone 15 Pro 上看到的是单行溢出省略，这可能是由于你的应用或者手机设置的原因。

一般来说，你可以通过两种方式来实现多行文本溢出省略：

1. 使用 CSS 的 -webkit-line-clamp 和 text-overflow 属性。

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

这里的 -webkit-line-clamp: 3; 表示限制内容在 3 行以内，超过的部分会被省略号替代。注意，这种方法主要适用于 WebKit 内核的浏览器，比如 Chrome 和 Safari。

2. 使用 CSS 的 display: -webkit-box 和 -webkit-line-clamp 属性。

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

这种方法与上面的方法类似，但需要使用 display: -webkit-box，不过同样存在兼容性问题。

另外，你的问题中提到的是 iPhone 15 Pro，但并没有说明你是在 iOS 15 还是其他版本上运行。有些 CSS 特性在不同版本的 iOS 中可能会有不同的表现。如果是在一个较旧的版本上测试，可能会存在兼容性问题。如果你正在开发的应用需要支持较旧的设备，那么你可能需要使用一些 JavaScript 的库来实现这个功能，例如 clamp.js 或者 shave.js。