Line Clamp搭配首字母大写在Chrome中失效，如何解决？

问题原因 #

当元素同时使用-webkit-line-clamp（实现多行截断）和::first-letter伪元素设置首字母大写时，Chrome无法正常识别::first-letter。这是因为WebKit内核的-webkit-line-clamp依赖display: -webkit-box布局，会将文本内容封装进匿名弹性盒结构，导致::first-letter无法匹配到目标首字母；而Firefox的多行截断实现逻辑不同，所以能正常生效。

可行解决方案 #

方案1：手动包裹首字母标签（兼容性最优） #

直接在HTML中给首字母单独添加标签，通过类名设置大写样式，不受布局影响：

<div class="text-clamp">
  <span class="capitalize-first">t</span>his is a long sample text that needs to be clamped to 5 lines and have the first letter capitalized. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

.text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.capitalize-first {
  text-transform: uppercase;
  /* 可选：添加首字母放大等样式 */
  font-size: 1.5em;
  font-weight: bold;
}

方案2：JavaScript动态包裹首字母（适合动态内容） #

如果文本是动态生成的，用JS自动给每个目标元素的首字母添加包裹标签：

document.querySelectorAll('.text-clamp').forEach(el => {
  const originalText = el.textContent.trim();
  if (!originalText) return;
  const firstChar = originalText.charAt(0);
  const restText = originalText.slice(1);
  el.innerHTML = `<span class="capitalize-first">${firstChar}</span>${restText}`;
});

配合方案1中的CSS样式即可生效。

方案3：使用伪元素模拟（仅适用于固定首字母场景） #

如果文本首字母固定，可通过::before伪元素插入大写首字母，同时隐藏原首字母：

.text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  padding-left: 1em; /* 给伪元素预留空间 */
}
.text-clamp::before {
  content: 'T'; /* 固定首字母 */
  position: absolute;
  left: 0;
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: bold;
}
.text-clamp::first-line {
  padding-left: 0.5em; /* 调整首行文本位置对齐 */
}

这种方法灵活性差，仅适合内容固定的场景。

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