如何用CSS阻止含绝对定位::before的拆分单词换行？

可以实现，只需要调整.note的CSS样式，让中间的空span不成为换行断点，同时保留蓝色标记和左侧数字：

body {margin-left:30px; position:relative}

.note {
  display: inline-block;
  width: 0;
  border-left: 2px solid blue;
  height: 1em; /* 让边框高度和文本行高匹配 */
  vertical-align: middle; /* 保证边框和文本垂直对齐 */
}
.note::before {
  content:"5";
  position:absolute;
  left:-25px;
}

原理 #

原代码中的空span是行内元素，浏览器会把它当成文本之间的分隔点，允许在此处换行。通过将.note设为inline-block并把宽度设为0，这个span就不再占据水平空间，inci和didunt会被浏览器识别为一个连续的单词，不会在中间拆分换行；同时保留的border-left仍能显示在单词内部的指定位置，左侧的数字标记不受影响。

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