如何使文本觸及div的底部

我有一個HTML頁面，其中有一些較大的文本元素。我希望文本對齊到包含div的底部，以便它觸及div的底部。如何使文本觸及div的底部

我試過，但文字和底部之間仍然有一些空格。有什麼方法可以刪除這個空間並讓文字觸及底部？

Here是我試過的一個實況樣本。

<html lang="en"> 
<head> 
    <style type="text/css"> 
     .bottomAlignedText { 
      position: relative; 
     } 
     .bottomAlignedText span { 
      position: absolute; 
      bottom: 0; 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;"> 
    <span style="font-size:300px;">Test</span> 
</div> 
</body> 
</html>

來源

2015-12-20 Lahiru Chandima

爲此，您可以用line-height

.bottomAlignedText { 
 
    position: relative; 
 
} 
 
.bottomAlignedText span { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    line-height: 0.7; 
 
}

<body> 
 
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;"> 
 
    <span style="font-size:300px;">Test</span> 
 
</div> 
 
</body>

來源

2015-12-20 13:35:11

我有一個問題。這個'0.7'線高度適用於所有字體和字體大小？ –

但是，如果有多行，它會導致不可讀。 – nicael

你的意思是這個https://jsfiddle.net/x8j0e192/6/？ –

如何使文本觸及div的底部

回答

相關問題