使用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的建议吗？

Answer 1

我想说把它构建成场景。

标记：

<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友好的）

Answer 2

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

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

它应该有用 - 如果你想要额外的间距，也许你应该将你的休息包裹在另一个div中？

Answer 3

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

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

此处第三个p前面没有p元素，而是div元素，因此选择器p + p不适用于它。

Answer 4

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

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

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

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

<p><br/></p>

http://jsfiddle.net/bnMzQ/25/