React JS中如何用CSS实现两行文本末尾显示省略号？

你尝试用内联CSS实现帖子描述两行显示并添加末尾省略号，参考了YouTube的样式，但在MacBook Safari和iOS浏览器中失效，核心问题通常来自构建工具对非标准Webkit属性的移除，以及行内元素的上下文兼容性问题，以下是具体解决方法：

核心问题分析 #

Safari依赖-webkit-line-clamp和-webkit-box-orient: vertical实现多行省略，但像Terser、Autoprefixer这类构建工具会默认移除-webkit-box-orient这个非标准属性，导致样式失效；另外行内元素（如<span>）的上下文可能也会影响Webkit布局规则的生效。

解决方法 #

1. 改用CSS类（推荐方案） #

内联样式容易被构建工具处理，改用CSS类配合注释可以阻止属性被移除：

.post-description {
  line-height: 2rem;
  font-weight: 500;
  max-height: 4rem;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

在React组件中使用：

<span className="post-description">{description}</span>

/* autoprefixer: off */注释会告诉Autoprefixer和压缩工具保留-webkit-box-orient属性，避免被误删。

2. 强制保留内联样式中的属性（如果必须用内联） #

如果一定要使用内联样式，可以通过计算属性的方式绕开压缩工具的检测：

<span
  style={{
    lineHeight: "2rem",
    fontWeight: "500",
    maxHeight: "4rem",
    overflow: "hidden",
    display: "-webkit-box",
    textOverflow: "ellipsis",
    whiteSpace: "normal",
    WebkitLineClamp: 2,
    // 用计算属性避免被压缩工具移除
    ...{ ['-webkit-box-orient']: 'vertical' }
  }}
>
  {description}
</span>

3. 确保元素布局上下文 #

如果使用<span>仍有问题，可以尝试将其替换为<div>等块级元素，或者在样式中显式添加display: block（配合display: -webkit-box不会冲突），确保Safari能正确识别布局规则。

4. 版本兼容性检查 #

-webkit-line-clamp仅支持iOS 10.0+和Safari 10.1+，如果需要兼容更老版本，只能通过JavaScript手动截断文本，比如计算字符长度或使用DOM API判断溢出情况。

内容的提问来源于stack exchange，提问作者Mehdi Faraji