句子中的第一個單詞具有較大的字體大小：容器單元將它切斷頂部

我的網站的第一個單詞的正文比其他單詞的字體大得多。出於某種原因，包含文本的容器將頂部的第一個單詞切斷。可能是因爲第一個單詞的行高與文本的其餘部分相同，因此容器無法正確計算自己的高度。我已經包含了我的css文件的全部內容以便能夠正確調試，所以不會在這裏嵌入它。如果這是要求的話，我會很樂意編輯我的文章來包含它，但它將是約300行文字）句子中的第一個單詞具有較大的字體大小：容器單元將它切斷頂部

如果我增加第一個單詞的行高度，同一行上的其餘文本將獲得相同的行高並從其餘下面的文字。如果我向容器元素添加一個邊距頂部，則第一個單詞不會被切斷，但是文本的底線會被切斷。

我玩過溢出：可見/隱藏以及所有父元素，但無濟於事。

來源

2012-10-29 grrrbytes

p元素有line-height: 1.5em，它將設置文本行的高度。由於em單位，高度是根據字體大小確定的，它是爲所使用的元素設置的字體大小，所以行高不會因爲在子元素上設置較大的字體而增加。

來源

2012-10-29 01:18:13 Guffa

明白了。當我將行高設置爲1.5（沒有em）時，它不再切斷第一個單詞。但現在問題重新出現，第一行從文本的其餘部分跳轉出來。我瞭解問題的原因，但還沒有找到解決方案，但尚未找到解決方案，讓第一個字的字體更大，同時保持與文本流的其餘部分保持一致，並恢復所有字體的高度線。任何有關如何實現這一目標的線索？ – grrrbytes

@grrrbytes：文本圍繞基線對齊，所以如果您希望第一項工作不要超出文本的其餘部分，您需要將其從該文本行中刪除。您可以使用'float：left;'使其餘的文本在其周圍流動，並且如果您不希望它推出多行，請在其上設置特定的高度。 – Guffa

我會嘗試使用未在px或ems中設置的行高聲明。

p, span { line-height:1 }

我也試過

span { line-height:0.8 }

這似乎給頂「推」的最起碼數額，但我只看到它在FF在Mac上。

我注意到，用字體，他們的高度和寬度呈現從瀏覽器到瀏覽器不同。這可能會加劇字體，沒有得到正確的領導，字距等。這可能會導致「奇怪的」換行符，這會導致設置塊高度的「問題」 - 特別是從FF和Chrome到IE 。 FWIW。

編輯： http://jsfiddle.net/mvf6j/

設置行高爲1（兒童）等同於親本的行高的100％;因此，在您的示例代碼1 = 1.5em。在我的小提琴/例子中，1 = 1em（即使孩子是2em字體）。它是繼承。它使孩子相對於父母。如果你想要改變父母的大小，那麼你需要猜測。當你給孩子設置明確的線高時，所有容易確定尺寸/關係的方法都會消失。

來源

2012-10-29 01:31:34 Dawson

句子中的第一個單詞具有較大的字體大小：容器單元將它切斷頂部

回答

相關問題