Как сделать текст касаться нижней части 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

ответ

Смежные вопросы