如何在css中強行強制行高，沒有拉伸？

如何在CSS中強制行高，這樣不會有大的字母拉長行高。相反，他們應該在上面的線下剪切，甚至合併上面的線。如何在css中強行強制行高，沒有拉伸？

CSS line-height似乎像默認情況下MS Word的「至少」行高選項一樣工作。我想讓它像MS Word的「完全」選項一樣工作。

例如：

http://jsfiddle.net/DUpgN/

那裏，線是不一樣的高度，因爲一行中有一些較大的字母。無論如何，我都希望所有線條都是相同的高度。

來源

2012-09-28 Y. Shoham

字形（字符的視覺表示）垂直內的內聯框居中。如果線條高度大於內容高度，則將差異的一半添加爲頂部的空間 ;底部還添加了相同的量。

這就是您的示例中主要非粗體文本的情況。

設置在未替換的內聯元素上時，它指定用於計算環繞線框高度的高度。

所以在大膽的文字，你仍然有8.5px 以上字體大小，這會導致問題。

您可以通過設置比字體大小（check this demo）更小的行高更小的來阻止它。因爲它是一個內聯元素，並且沒有overflow:hidden;它仍然是可見的，但它不會將任何像素添加到文本行高的其餘部分。

據我所知，除非使用像transform:scale(value)等一些CSS3屬性，否則不可能「拉伸」字母。

Reference

代碼：

<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b> 
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p>

CSS：

p { 
    line-height:17px;   
    font-size:15px; 
    width:150px; 
} 
b { 
    font-size:25px; 
    line-height:1px; 
}

來源

2012-09-28 15:38:27 Giona

雖然如果'b'變得太大，那麼這將不起作用，例如http://jsfiddle.net/mM4tR/3/（我不明白爲什麼。） –

@ PaulD.Waite，因爲在你的例子中'b'是50px高（文本的其餘部分：15 + 17 = 32px）。在這種情況下，您可以添加'display：inline-block;'但它將覆蓋底部文本（http://jsfiddle.net/gionaf/3rQjt/），我不認爲OP是想要的... – Giona

這有助於讓它更容易理解。 –

-1

沒辦法。您可以考慮放大線高，例如30px，並且您將獲得所有線條的相同高度。

來源

2012-09-28 15:01:29 Eric

也許添加

display:inline-block; 
height:13px;

到B標籤

來源

2012-09-28 15:10:53 JasonGroulx

不知道這是你以後有什麼，但是這將削減比該行高度大的任何文字。

b { 
    display:inline-block; 
    overflow:hidden; 
    vertical-align:top; 
    }

來源

2012-09-28 15:33:01

即使沒有'顯示：內聯塊;溢出：隱藏;'它的工作。它也適用於「底部」，而不僅僅是「頂部」。 –

如何在css中強行強制行高，沒有拉伸？

回答

相關問題