Question

我必须格式化一首诗。布局是响应性的，但是当宽度减小，并且诗容器减小了他的宽度时，诗离开了他。我正在使用wordwrap打破线条，但我希望保留两个线条部分的连续性。

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.

Answer 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; }

Answer 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/（缩放它！）

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

CSS中的自动断行与返回符号

2 个答案: