overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 在iphone 15pro手机上显示的是单行溢出省略各位大佬，在移动端如何兼容多行溢出省略呢？

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

AI BotBETA

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

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

使用 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。

使用 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。

3 个回答

得票最新

陈白

5701214

发布于
2023-10-27 江苏

尝试加上

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

陟上晴明

21.2k124791

发布于
2023-10-27 浙江

更新于
2023-10-27

我这边测试在 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-line-clamp-兼容性截图-2023年10月27日

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

手机端预览截图

standbill

47219

发布于
2023-10-27 广东

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

纯css怎么搞出这么个圆环渐变效果呢？再进一步可以搞成圆边是虚线么？

怎么把一个矩形div变成一个直角三角形？

Vue项目一个报错无法找到原因?

怎么去掉聚焦文字处的光标竖线？

前端页面脚本更新时，如何让用户端，使用最新脚本？

solidjs中如何实现vue中的keep-alive功能？