负letter-spacing文本换行字符截断及渐变文字问题求助

负letter-spacing会让字符向彼此靠拢，换行时行尾的字符会因为负间距被“拉”出容器可视范围，导致截断。针对这个问题，有几个可靠的解决方法：

方法1：容器添加对应内边距 #

给标题容器设置左右方向的内边距，数值大于等于你设置的负letter-spacing的绝对值，确保容器overflow为默认的visible状态。这样行尾被负间距拉出的部分会被内边距预留的空间容纳，不会被截断。

示例代码：

.title {
  letter-spacing: -0.05em; /* 你的负字间距值 */
  padding: 0 0.05em; /* 左右内边距匹配负间距绝对值 */
}

方法2：伪元素扩展容器右侧空间 #

给标题容器添加伪元素，设置宽度等于负letter-spacing的绝对值，通过行内块的形式给行尾额外扩展出容纳被截断字符的空间，适合不能直接加内边距的场景。

示例代码：

.title {
  letter-spacing: -0.05em;
  position: relative;
}
.title::after {
  content: "";
  width: 0.05em; /* 匹配负间距绝对值 */
  display: inline-block;
}

方法3：调整文本换行逻辑 #

设置white-space: pre-wrap让文本按照正常字符边界换行，避免负间距干扰换行计算，建议结合内边距方法一起使用，效果更稳定。

示例代码：

.title {
  letter-spacing: -0.05em;
  white-space: pre-wrap;
  padding: 0 0.05em;
}

你提到的color2、color3两种样式方案，核心问题都是负间距导致的字符溢出容器，优先尝试方法1，实现成本最低且兼容性最好。

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