样式自动换行

Question

当一行文本换行在块元素中时，我想显示一个视觉指示符，表明文本已换行，而不是包含明确的换行符。但是，mdn 没有列出 ::after-breaks 或 ::wrap.

行中的任何选择器

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

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

有人知道如何实现吗？ CSS 更可取，但 js 是可以接受的。

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

Answer 1

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

想法很简单：在包含代码的框的右侧重复一个图像 - 以防可以将 newline-icon/char 放在最右侧而不是实际的中断。

您必须用图像或内嵌图像 (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>

样式自动换行

Styling word wrap

css

word-wrap