標題中帶有行高的長標題（多行）

我用css創建了一個H1標題，並向它添加了一個行高，所以H1元素具有正確的高度並且文本垂直居中。標題中帶有行高的長標題（多行）

問題在於長標題需要多行。

一個例子是在的jsfiddle創建：https://jsfiddle.net/wygpfbm3/

HTML：

<h1> 
This is a normal title 
</h1> 


<h1> 
This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long title 
</h1>

CSS：

h1 { background-color: #ebebeb; border: 1px solid #c7c7c7; border-left: none; border-right: none; top: 0px; line-height: 44px; font-size: 18px; font-weight: normal; color: #3e3e3e; } 
h1:before { content: ''; background-color: transparent; border: 6px solid #c7c7c7; border-color: #c7c7c7 transparent transparent #c7c7c7; float: left; } 
h1:after { content: ''; border: 6px solid #fff; border-color: #fff transparent transparent #fff; float: left; margin-left: -12px; margin-top: -1px; }

正如你可以在小提琴例子中看到，一個正常的標題（單線）正在完善。當它是一個很長的標題時，線條相距太遠（因爲我設置了線條高度）。

此外，第二行沒有像第一行那樣的填充。另一個問題是左上角的白色小三角。當標題是多行時，它會向下移動。

任何人都知道我能如何以一種乾淨的方式解決這個問題，首選CSS？

來源

2016-07-13 OsiriX

您將行高設置爲44px，大概是44px爲單行。

因此，代替使用行高爲什麼不使用頂部&底部填充代替

44px - 18像素（字體大小）/ 2 = 13像素填充

h1 { 
 
    background-color: #ebebeb; 
 
    border: 1px solid #c7c7c7; 
 
    border-left: none; 
 
    border-right: none; 
 
    padding: 13px 0px; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    color: #3e3e3e; 
 
    width: 80%; 
 
    margin: 3em; 
 
    position: relative; 
 
} 
 
h1::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -1px; 
 
    left: 0; 
 
    border-width: 6px; 
 
    border-style: solid; 
 
    border-color: white transparent transparent white; 
 
} 
 
h1::before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-width: 6px; 
 
    border-style: solid; 
 
    border-color: #c7c7c7 transparent transparent #c7c7c7; 
 
    top: 0; 
 
    left: 1px; 
 
}

<h1> 
 
This is a normal title 
 
</h1> 
 

 

 
<h1> 
 
This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long title 
 
</h1>

來源

2016-07-13 11:02:10

由於，這對於行高問題起作用，但不適用於左上角的截斷角度：https://jsfiddle.net/wygpfbm3/2/ – OsiriX

但是，爲您解決了這個問題。 –

謝謝，這工作！ – OsiriX

標題中帶有行高的長標題（多行）

回答

相關問題