構建段落像使用CSS

這小說是CSS：構建段落像使用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的默認文本編輯器）

我不知道它是如何作品（我把它形成了一個我不記得的網站）。它產生這樣的：

enter image description here

只有一個問題。第三段是一個新場景，不應該縮進。我想知道是否有一種方法來解決這個CSS？（CSS3是OK）

編輯：

我猜jQuery是唯一的出路？任何建議使用jQuery做到這一點？

來源

2012-08-04 alexchenco

我建議只是增加類的那些沒有得到縮進和/或沒有經過他們休息。 – Chad 2012-08-04 05:11:34

html的結構是什麼？需要知道哪些標籤用於段落和場景。 – TMB 2012-08-04 05:11:40

這可能有助於http://stackoverflow.com/questions/1139763/whats-css-style-p-p – krish 2012-08-04 05:12:20

我會說，把它構造成場景。

標記：

<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-friendly）

來源

2012-08-04 05:38:04 Chad

@ Torr3nt這是一個很好的選擇，我想我必須找到一種方法來改變WordPress的編輯器。 – alexchenco 2012-08-04 05:41:15

WordPress的編輯器同時具有可視化和HTML編輯器。您可以在文本框的右上角切換它。 – Chad 2012-08-04 05:43:20

這是因爲你有所有相鄰的段落標記。如果你的HTML改成這樣：

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

它應該工作 - 如果你想額外的空間，或許你應該換另一個DIV中的休息時間嗎？

來源

2012-08-04 05:22:48

對不起，我不能改變它是WordPress的文本編輯器。 – alexchenco 2012-08-04 05:29:36

@alexchenco如果你不能改變標記，這將是艱難的。 – TMB 2012-08-04 05:36:42

您應該使用<p><br></p>以外的方法標記場景的變化，該方法是僅包含換行符的段落。以下是人工太多，但會導致一個空行，即使CSS熄滅：

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

這裏第三p不是由p元素，但一個div元素之前，所以選擇p + p並不適用於它。

來源

2012-08-04 05:29:20

對不起，我不能改變它是WordPress的文本編輯器。 – alexchenco 2012-08-04 05:30:03

@alexcheco，那麼你應該得到一個編輯器，可以幫助完成你的工作，見例如http://wpmu.org/why-you-hate-the-wordpress-text-editor/ – 2012-08-04 05:44:20

同意@Jukka K. Korpela，你應該使用更好的東西。我從來沒有使用文字按鈕，但如果你不能改變標記，那麼你可能想改變。

如果你現在只是需要它，你可以運行這個腳本，它將修復css值。

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

您只需確保在第一個場景之前有<br/>標記。

<p><br/></p>

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

來源

2012-08-04 05:49:29 TMB

確保指定'br'，但是，如果您在頁面中使用任何其他'br'標籤。 – Chad 2012-08-04 05:50:44

這個/不是/最好的選擇器，並且可以改進。 – TMB 2012-08-04 05:54:44

構建段落像使用CSS

回答

相關問題