css - 使用 CSS 构建像小说一样的段落

Question

这是CSS：

p + p {
 text-indent: 1.1em;
 margin-top: 0;
}
p {
 font-family: 'Crimson Text', serif;
 margin: 0;
}

HTML：

<p>...<p>
<p>...</p> (new paragraph)
<p><br><p>
<p></p> (new scene)

（这是 WordPress 的默认文本编辑器）

我不确定它是如何工作的（我把它从一个我不记得的网站上拿来）。它产生这个：

在此处输入图像描述

只有一个问题。第三段是新场景，不应该缩进。我想知道是否有办法用 CSS 解决这个问题？（CSS3 没问题）

编辑：

我猜jQuery是唯一的方法？有什么建议用 jQuery 来做吗？

score 2 · Accepted Answer

我会说把它组织成场景。

标记：

<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>
<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

还有一些 CSS：

.scene p { text-indent: 1.1em; }
.scene p:first-child { text-indent: 0; }

这可以清理您的标记，并实现全面的一致性。（这也是 ie7/8 友好的）

score 0 · Accepted Answer

这是因为你有所有相邻的段落标签。如果您将 HTML 更改为：

<p>...<p>
<p>...</p> (new paragraph)
<br>
<p></p> (new scene)

它应该可以工作 - 如果你想要额外的间距，也许你应该将你的 break 包裹在另一个 div 中？

score 0 · Accepted Answer

您应该使用除之外的方法来标记场景的变化<p><br></p>，这是仅包含换行符的段落。以下内容也是人为的，但即使 CSS 关闭也会导致空行：

<p>...</p>
<p>...</p>
<div>&nbsp;</div>
<p>...</p>

这里第三个p前面不是p元素而是div元素，所以选择器p + p不适用于它。

score 0 · Accepted Answer

同意@Jukka K. Korpela，您可能应该使用更好的东西。我从未使用过 word press，但如果您无法更改标记，那么您可能想要更改。

如果你现在只需要它工作，你可以运行这个脚本，它会修复 css 值。

$('br').parent('p').next('p').css('text-indent', '0em');

您只需要确保<br/>在第一个场景之前有标签。

<p><br/></p>

4 回答 4