如何用CSS为pre块的换行内容添加换行指示器？

当然可以通过CSS实现这种换行指示效果！针对你设置了white-space: pre-wrap的pre块，我整理了两个实用的方案，能在自动换行的位置添加可视化的标识（比如|），帮读者区分原本的单行文本和自动换行的位置。

方案一：利用背景渐变实现行尾标识 #

这个方案通过线性渐变在每一行的最右侧绘制|，不会影响文本本身的结构，适配性很强：

pre {
  white-space: pre-wrap;
  /* 设置行高，确保标识和文本垂直对齐 */
  line-height: 1.4;
  /* 右侧留出空间放置标识，避免和文本重叠 */
  padding-right: 1.2ch;
  /* 渐变背景：从透明过渡到灰色|，每一行重复一次 */
  background-image: linear-gradient(to right, transparent calc(100% - 1ch), #666 100%);
  background-size: 100% 1.4em; /* 高度和行高保持一致 */
  background-repeat: repeat-y;
}

原理说明： #

• linear-gradient 创建一个从透明到灰色|的横向渐变，calc(100% - 1ch) 确保标识只占最后一个字符的宽度；
• background-size 的高度设置为和行高一致，让每个行尾都对应一个标识；
• repeat-y 让渐变沿着纵向重复，覆盖所有自动换行的行。

方案二：利用绝对定位伪元素实现 #

这个方案通过::after伪元素在pre块的右侧生成标识，每个行高位置对应一个|，视觉上更灵活：

pre {
  white-space: pre-wrap;
  line-height: 1.4;
  padding-right: 1.2ch;
  position: relative;
  /* 确保pre块有明确的宽度，标识能定位到正确位置 */
  width: 100%;
  box-sizing: border-box;
}

pre::after {
  content: '|';
  color: #666;
  position: absolute;
  right: 0.2ch; /* 微调标识的水平位置 */
  top: 0;
  bottom: 0;
  line-height: inherit; /* 继承pre的行高，让标识和每行文本对齐 */
  pointer-events: none; /* 标识不干扰文本的选中、复制等交互 */
}

原理说明： #

• 伪元素::after生成|，通过绝对定位固定在pre块的右侧；
• 继承pre的行高后，标识会自动在每个行高的位置重复显示（因为行高决定了文本的垂直分布）；
• pointer-events: none 确保用户选中文本时不会误选到标识。

额外优化建议 #

• 可以调整标识的颜色（比如用#999浅灰色），让它既可见又不抢文本的注意力；
• 如果你的pre块有自定义字体，记得调整1ch的宽度适配字体（1ch等于当前字体中数字0的宽度，大部分场景下适配性很好）；
• 如果不需要给硬换行的行尾加标识，目前纯CSS很难区分软换行和硬换行，这种情况可能需要结合一点点JavaScript来处理，但纯CSS方案已经能满足大部分场景的需求。

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