如何在Firefox中限制文本行数？CSS-webkit-line-clamp兼容问题

你遇到的问题很常见——-webkit-line-clamp系列属性是WebKit内核浏览器（Chrome、Safari）的私有实现，Firefox并不识别这套规则，所以会出现文本无法截断、空白间隙的情况。下面给你两种可行的解决方案：

方案1：兼容Firefox的前缀写法（支持Firefox 68+） #

直接添加Firefox对应的私有前缀属性，和WebKit的写法保持一致，这样就能同时兼容Chrome、Safari和Firefox：

#ctf p.ctf-tweet-text {
  overflow: hidden;
  /* WebKit内核浏览器兼容 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* Firefox兼容 */
  display: -moz-box;
  -moz-line-clamp: 3;
  -moz-box-orient: vertical;
  /* 可选：设置行高让截断位置更精准 */
  line-height: 1.5;
}

方案2：使用最新CSS标准属性（支持Firefox 117+） #

如果你的目标用户都使用较新版本的Firefox，可以直接使用标准化的line-clamp属性，写法更简洁：

#ctf p.ctf-tweet-text {
  overflow: hidden;
  line-clamp: 3;
  /* 保持WebKit兼容，适配部分旧版Chrome/Safari */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* 标准display属性配合line-clamp */
  display: block;
}

补充说明 #

• 两种方案都必须保留overflow: hidden，这是文本截断的基础条件，确保超出容器的部分被隐藏。
• 如果推文文本的行高不固定，建议显式设置line-height，这样多行截断的高度计算会更准确，避免出现空白间隙或者截断位置偏移的问题。

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