在 HTML 中指示虚线（由于断字）

Question

我想用一个图标来表示一条线已经断开（由于 word-break CSS 属性）（请参阅 VS2019 如何执行此操作的屏幕截图）。我需要这个，因为我在 HTML 中显示带有 code 或 pre 元素的代码。你知道如何用简单的方法解决这个问题吗（最好是CSS）？

Answer 1

这是一个使用重复背景图片的 mostly-pure-CSS 版本。 JavaScript 只需要在硬换行符上拆分内容。如果需要旧版浏览器支持，CSS 变量可以是 hard-coded 或使用 SCSS 变量等。

const target = document.querySelector('#target')

const lines = target.textContent.split('\n').map(str => {
  const div = document.createElement('div')
  div.classList.add('line')
  div.textContent = str

  return div
})

target.textContent = ''
lines.forEach(line => target.appendChild(line))

:root {
  --line-height: 20px;
}

#target {
  white-space: pre-wrap
}

.line {
  display: flex;
  padding-right: var(--line-height);
  line-height: var(--line-height);
  position: relative;
}

.line:nth-child(odd) {
  background: #f8f8f8;
}

.line::after {
  content: '';
  position: absolute;
  right: 0;
  height: calc(100% - var(--line-height));
  background-repeat: repeat-y;
  background-size: var(--line-height) var(--line-height);
  width: var(--line-height);
  font-weight: bold;
  color: #269;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg%3E%3Crect fill='none' id='canvas_background' height='42' width='42' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Cpolygon id='svg_1' points='16.397236347198486,20.219151496887207 9.397236347198486,25.219151496887207 16.397236347198486,30.219151496887207 '/%3E%3Cpath id='svg_2' d='m27.39724,10.21915l0,9c0,3.3 -2.7,6 -6,6l-8,0' stroke-miterlimit='10' stroke-width='4' stroke='%23000000' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

<pre id="target">Lorem ipsum dolor sit amet.
Consectetur adipisicing elit.
Debitis vero dolorem officia omnis nulla molestiae perferendis sequi illo.
Molestiae error inventore perspiciatis maxime?
At, illum!
Cupiditate consequuntur harum minima perferendis recusandae alias, rem, vitae dolor quo fuga, facilis sunt dolorem sint perspiciatis eveniet suscipit inventore illo unde animi saepe officiis assumenda laboriosam error.
Incidunt, dolorem ullam ipsa enim odit minima et cumque impedit?
Suscipit corrupti voluptates placeat, aliquam nesciunt minima ipsum debitis pariatur atque incidunt nobis facere iure numquam assumenda officiis facilis.</pre>

在 HTML 中指示虚线（由于断字）

Indicate a broken line in HTML (due to word-break)

html

css

word-break