html - 带有返回符号的 CSS 中的自动换行

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

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