样式换行答案

【问题标题】：Styling word wrap样式换行
【发布时间】：2022-01-10 13:19:41
【问题描述】：

当一行文本被包裹在块元素中时，我想显示一个视觉指示器，表明文本被包裹，而不是包含显式换行符。但是，mdn 并没有列出任何类似于::after-breaks 或::wrap 的选择器。

假设有这样的事情，我基本上会写下面的CSS（&#8617;是↩）

.line-text::after-break {
  content: &#8617;
}

有谁知道如何做到这一点？ CSS 是可取的，但 js 是可以接受的。

为了扩展用例，由于 Ouroborus 的注释显示上下文很重要，因此被包装的文本是源代码。结果，我无法控制它。虽然我可以在渲染管道中进行预处理，但我无法计算换行位置，因为这些位置可能会由于无法检测到的用户与浏览器的交互而发生变化，例如在打印时更改边距、纸张大小或方向。

【问题讨论】：

由于换行，无法直接检测换行符。您可以通过检查容器的高度并将其与行高进行比较来推断存在这样的换行符。但是，您将无法判断这种中断发生在哪里。无论如何，一种可能性可能是：如果您知道单词永远不会被拆分，则可以将每个单词包装在一个 span 中，检查每个 span 的 y 位置，然后在两个相邻的 y 位置发生变化的位置插入特殊字符跨越。这不是最佳选择，因为调整大小会改变发生中断的位置。

标签： css word-wrap

【解决方案1】：

也许不是解决方案 - 但希望对您有所帮助:)

这个想法很简单：在包含代码的框的右侧重复一个图像 - 以防可以将换行符图标/字符放在最右边而不是实际的中断处。

您必须将线性渐变替换为图像或内联图像（data:image[...]）

.code {
  width: 200px;
  line-height: 15px;
  background: repeating-linear-gradient(#000, #DDD 1px, #FFF 15px);
  background-size: 15px 30px;
  background-repeat: repeat-y;
  background-position: top right;
  padding-right: 15px;
}

<div class="code">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

【讨论】：

在不说服 HTML 工作组为视觉换行指示器创建新属性的情况下，这可能是我们所能得到的最接近的结果。这种方法还意味着我可以将 SVG 用于自定义字形。