CSS中带有返回符号的自动换行答案

【问题标题】：Auto break line in CSS with return symbolCSS中带有返回符号的自动换行
【发布时间】：2013-09-09 20:36:06
【问题描述】：

我必须格式化一首诗。布局是响应式的，但是当宽度减小时，诗歌容器减小了他的宽度，这首诗就从他身上消失了。我使用自动换行来换行，但我希望保持两行部分的连续性。

pre {
      word-wrap: break-word;
      white-space: -moz-pre-wrap;
      white-space: pre-wrap;
}

可以这样做（添加返回符号↵）：

Cold flower heads are raining over my heart.
Oh pit of debris, fierce cave of the shipwrecked.

到

Cold flower heads are↵
raining over my heart.
Oh pit of debris, fierce↵
cave of the shipwrecked.

【问题讨论】：

标签： html css word-wrap pre

【解决方案1】：

您不能在 CSS 中的行尾添加内容。添加文本内容的唯一方法是使用content 属性，该属性不适用于:first-line 伪元素。

但是，指示延续的目标可以通过不同的方式实现：通过缩进延续行。为此，您需要将诗歌的每个逻辑行都设为一个元素，例如

<div class=poem>
<div>Cold flower heads are raining over my heart.</div>
<div>Oh pit of debris, fierce cave of the shipwrecked.</div>
</div>

您可以通过设置左边距并为第一行取消它来缩进续行，方法是为text-indent 设置一个负值（仅缩进第一行）：

.poem > div { margin-left: 1em; text-indent: -1em; }

【讨论】：

这既不能解决问题，也不能解决问题。
@weiglt，它专门回答了问题（“你不能”），并另外提出了一种解决方法或替代方法，以实现（以一种方式）问题文本中描述的目标。答案还包括什么？
我认为你可以使用这种方法并添加一个包装标记，但只能在一行的开头：在行 divs 上使用background-image（标记的图片）并设置@ 987654327@。如果 div 包含多于一行的文本，这将使背景图像仅可见。我还没有尝试过，但它应该可以工作。

【解决方案2】：

恐怕有点复杂，但你必须使用这样的东西：

HTML：

<div class="nowrap">Cold flower heads are&nbsp;</div><div class="nowrap">raining over my heart.</div><br />
<div class="nowrap">Oh pit of debris, fierce&nbsp;</div><div class="nowrap">cave of the shipwrecked.</div>

CSS：

.nowrap {
    white-space:nowrap;
    float:left;
}

演示：http://jsfiddle.net/jaAhk/2/（缩放！）

如果你想使用它取决于这首诗有多大，我猜。

【讨论】：

这不会添加任何返回符号。它可能会解决应该提出的问题，但不会解决实际提出的问题。