CSS填充自動換行符

我下面的HTML：CSS填充自動換行符

<div class="container"> 
    <div class="header"> 
    <h1> 
     a very long long long, really very very long headline ... 
    </h1> 
    </div> 
</div>

和下面的CSS：

.container{ 
    width:200px; 
} 

.header h1{ 
    background-color: #e0e0e0; 
    display: inline; 
    padding: 2px 8px; 
    color: black; 
    font-size: 16px; 
    font-weight: normal; 
    line-height: 30px; 
}

的問題是，瀏覽器增加了，因爲長頭和小寬的斷行包裝容器。沒關係。但是填充左側不會被添加到破損的第二行和更多行中。我可以用一個負面的文本縮進和正面的填充 - 左邊的.header來做到這一點。但背景顏色不會移動到左側，因此看起來仍然存在零填充。

我該如何改變這種情況？任何可用的技巧？

大的問候，福爾克

來源

2014-09-29 Falk

只是好奇，爲什麼使用'h1'標記並將其覆蓋爲'display：inline'？ – Harry 2014-09-29 11:43:50

'h1'標籤用於將內容標識爲標題。但是，根據用戶/客戶端的設計要求，可以將標題設置爲內聯框。 – 2014-09-29 11:52:50

剛剛刪除'display：inline' – 2014-09-29 11:54:03

嘗試改變display: inline;到display: inline-block;。

據我所知，內聯元素的左右填充將應用於元素的開始和結束，而不管是否存在任何換行符。在塊（或內嵌塊）元素上，填充應用於整個元素的左側和右側。

有關更多信息，請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/display！

來源

2014-09-29 11:43:24

但是然後我會得到一個完整的塊。但我想有不同長度的線條。像文字一樣有長度。所以我必須手動分割標題？但接下來我可能會有三次h1。沒有意義，或者我將不得不添加一個h1，其餘的只是添加一個自己的類。複雜。 – Falk 2014-10-02 12:41:05

啊，我現在看到了問題。事實證明，沒有簡單的方法來做到這一點。見http://css-tricks.com/multi-line-padded-text/ - 我喜歡「馬修彭內爾的三元素法」，儘管如果你很高興不支持IE，那麼「亞當坎貝爾的盒裝裝飾休息法」更好。 – 2014-10-02 13:28:36

感謝Olly！上面的評論是有幫助的！ – Falk 2014-10-07 21:52:15

除了現有的顯示器直插式：

-webkit-box-decoration-break: clone; 
box-decoration-break: clone;

需要注意的是currently not supported by IE/Edge和considered experimental - 但它適用於其他瀏覽器。可能是一個選擇！

這是一個相當新的CSS3標籤，在其他答案時可能無法使用。

來源

2016-09-11 10:54:09 tsc

CSS填充自動換行符

回答

相關問題