uni-app实现文字超过两行显示省略号 uni-app CSS文本溢出-uni-app-PHP中文网

-webkit-line-clamp在iOS真机失效是因为其依赖的渲染链被破坏，必须同时满足：display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden、明确宽高、非inline元素（如禁用text标签）、无flex干扰、line-height×行数≤max-height，缺一不可。

uni-app实现文字超过两行显示省略号 uni-app css文本溢出

-webkit-line-clamp 在 iOS 真机上失效，不是写法错了，而是它依赖的渲染链被破坏了——常见于 text 标签、rich-text 组件、或父容器未设宽高/未触发 BFC。

为什么 `-webkit-line-clamp` 在 iOS 上不生效

iOS Safari（及所有基于 WebKit 的 WebView，包括 uni-app iOS 真机）对 -webkit-line-clamp 有严格前提：必须同时满足以下条件，缺一不可：

display: -webkit-box 和 -webkit-box-orient: vertical 必须成对出现，且不能被其他 display 值覆盖（比如 text 标签默认是 inline，直接加这些样式无效）
容器必须有明确的 width 或 max-width，且不能是 fit-content 或依赖内容撑开
不能用 text 标签直接包裹文字——它会忽略 display: -webkit-box；必须换成 view 或 div
line-height × 行数 ≤ max-height，否则 iOS 会放弃截断逻辑（安卓更宽松）

正确写法：用 `view` 替代 `text` + 宽高约束

uni-app 中最稳妥的结构是：view 包裹纯文本（避免富文本干扰），并手动控制高度边界。示例：

<view class="multi-ellipsis">{{ longText }}</view>

对应样式（注意单位统一用 upx 或 px，别混用）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.multi-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4em;
  max-height: 2.8em; /* 1.4 × 2 */
  width: 100%;
  word-break: break-word;
}

如果字体大小是 28upx，建议 line-height: 1.4 + max-height: 78upx（28×1.4×2≈78），比用 em 更可控
禁用 white-space: nowrap——它会让 -webkit-line-clamp 完全失效
不要给该元素设 flex 相关属性（如 flex: 1），iOS 下可能重置 display

富文本（`rich-text`）场景怎么处理

rich-text 内部无法直接应用 -webkit-line-clamp，因为它的子节点是动态解析的 DOM 片段，样式穿透不了。可行方案只有两个：

在 JS 层做文本截断：用 String.prototype.substr() 或正则粗略按字符数截取（比如 60 字符），再拼接 "..."；适合内容结构简单、无格式要求的场景
外层套 view 并设固定高度 + overflow: hidden，但省略号不会自动出现——只能靠视觉裁剪，用户感知差
真要保留富文本+省略号，得改用服务端返回「摘要字段」，前端只渲染摘要，点开再拉全文