如何在 HTML/CSS 中模擬不間斷的段落？

Question

很久以前，一些被稱為“科幻迷”的怪人發明了另一種段落格式：不間斷。 在這種格式中，當您到達段落的末尾時，您將向上伸手並將旋鈕向下轉動一個空格，但不會移動筆架。 結果提供了與選項 1 相同的段落之間的視覺分隔，但沒有浪費行尾的所有空間。

I'm prepping a document that uses nonstoparagraphing for the web.
                                                                   This is easy 
to do in its current format (Word document).  Also works if turned into a PDF.  
But the obvious solution (add a bunch of NBSPs to the start of the lines) will 
break in a web browser if the user has changed the default font or even the 
font size.  
           Can anybody think of a way to get this effect, more-or-less reliably, 
in HTML and CSS?  (I'm willing to use Javascript too.)

Answer 1

我寫得很快，這不是一個完整的解決方案，但其他人可以改進我的答案：

http://jsfiddle.net/rJ22T/

p {
    display: inline;
    position: relative;}
p + p {top: 1em;}
p + p + p {top: 2em;}

基本上，將段落顯示為內聯元素，然后添加增量垂直移位。 一些 javascript 應該能夠自動執行此操作。

附錄：根據評論，我們需要考慮后面的元素。 將所有<p>元素放在一個<div> ，然后將其添加到 CSS：

p:last-child:after {
    content: "";
    display: block;
    margin-bottom: 4em;
}

在這里， 4em將等於最后一個top段落移位，加上您需要的任何額外間距。

附錄 2：這里有更多內容的另一個例子： http : //jsfiddle.net/rJ22T/3/