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

• Z时代
• 2024-02-09
• 分类：IT

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

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

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

回答：

尝试加上

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

回答：

我这边测试在 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 中的文字截断

回答：

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

以上是 vue2.0 多行溢出省略在移动端如何兼容？ 的全部内容， 来源链接： utcz.com/p/935071.html