使每個段落的最後一行比其他段落短

在排版時，通常認爲每段的最後一行至少比其他段落短一些。我如何使用CSS來實現這一點？使每個段落的最後一行比其他段落短

2017-08-17 Nuvanda

這不能作爲CSS的功能，但是你可以使用CSS的::after僞元素這樣的解決這一限制：

p { 
 
    text-align: justify; 
 
    text-align-last: left; 
 
} 
 

 
p::after { 
 
    content: '––––––––––––––––––––'; 
 
    visibility: hidden; 
 
    white-space: nowrap; 
 
}

<p style='width: 380px'> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
    sed do eiusmod tempor incididunt ut labore et dolore 
 
    magna aliqua. Ut enim ad minim veniam, quis nostrud 
 
    exercitation ullamco laboris nisi ut aliquip ex ea 
 
    commodo consequat. Duis aute irure dolor in 
 
    reprehenderit in voluptate velit esse cillum dolore eu 
 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
 
    non proident, sunt in culpa qui officia deserunt mollit 
 
    anim id est laborum.</p>

這將確保，即最後一行的行距至少比其他行少20行。如果該行中的內容太多，則最後一個單詞將被分解到下一行。

注意請確保您的段落不包含任何尾隨空格，因爲這將導致在最後一個單詞和僞元素之間允許換行。

來源

2017-08-17 15:44:05 Nuvanda

如果我繼承了一個使用這種技術的項目，我會立即刪除它。 – sheriffderek

在排版中，您可以預先確定許多事情 - 如列寬和長度。在網絡上，您無法知道哪些內容是動態的或者需要更改的 - 或者您網站的窗口顯示方式 - 可能會發生變化。如果您正在處理像傳統「海報」佈局那樣的圖形佈局 - 對於某些斷點，則可以使用<br>換行符 - 或者將副本拆分到不同的分隔符中以創建所需的外觀。

來源

2017-08-17 16:04:01 sheriffderek

請注意，如果您有能力預先確定換行符，這總是更好的解決方案，因爲它可以讓您使用更好的換行算法，而不是瀏覽器使用的貪婪換行。 – Nuvanda

使每個段落的最後一行比其他段落短

回答

相關問題