更改跨度的高度，文本溢出到下一行

我在製作一個受美國憲法啓發的網頁，我有一個奇怪的CSS問題。下面是相關的部分是什麼樣子：更改跨度的高度，文本溢出到下一行

這裏是我的HTML：

<span id="we-the-people" class="ui image"> 
    <img src="/images/we-the-people.png"> 
</span> 

<span id="preamble"> 
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
</span>

...和CSS：

#we-the-people { 
    margin: 2em; 
} 
#preamble { 
    font-family: US Declaration, serif; 
    line-height: 2.5em; 
    position: relative; 
    top: 35px; 
    font-size: 1.5em; 
}

我想那溢出到文本第二行更接近「我們人民」的形象，但我不知道如何去做。我試過改變line-height和position無濟於事。什麼似乎很奇怪的是，四溢的文字遠低於圖像的底部，因爲這個截圖檢查頁面顯示的：

誰能告訴了什麼問題？

來源

2017-09-14 liammccarty

嘗試從#we-the-people風格卸下底部2em保證金是這樣的：

margin: 2em 2em 0 2em; 
/*Assuming you need the 2em margin top, right and left*/

在#preamble風格取下position: relative;和top: 35px;條目。
線條高度也會影響垂直間距，尤其是如果您使用ems或%作爲這些從父字體大小級聯並可能導致奇怪的間距。

我會建議你使用乘法器與行高，像這樣：

line-height: 1.2;

注意，任何單位值是包括在內。 1.2會給出字體高度1.2x的字體高度。較低的值（包括負值）可用於將每條線移近前一條線（包括需要時重疊的線），較大的值會增加前導並將線移動得更遠。

另外字體名稱'US Constitution'應該用引號括起來，因爲它包含一個空格。希望這可以幫助。

來源

2017-09-14 19:27:42

非常感謝您的回覆。我做了這些修改，但是它把整個文本移動了。也就是說，溢出部分接近「我們人民」，但第一行文字也上移了（相同數量）。有沒有辦法來防止這種情況？ – liammccarty

嘗試在'＃我們這個人'風格中添加'vertical-align：middle;'。您可能需要嘗試不同的值才能獲得您之後的效果。 –

更改跨度的高度，文本溢出到下一行

回答

相關問題