如何使文本触摸div的底部 [英] How to make the text touch the bottom of the div
本文介绍了如何使文本触摸div的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个HTML页面，有一些大的文本元素。我想让文本对齐到包含div的底部，以便它接触到div的底部。
我尝试下面，但仍然有一些空格之间的文本和底部。
这里是我尝试的一个现场样本。
< html lang =en >
< head>
< style type =text / css>
.bottomAlignedText {
position：relative;
}
.bottomAlignedText span {
position：absolute;
bottom：0;
left：0;
}
< / style>
< / head>
< body>
< div class =bottomAlignedTextstyle =width：600px; height：600px; border：1px solid;>
< span style =font-size：300px;>测试< / span>
< / div>
< / body>
< / html>
解决方案
您可以使用 line-height
.bottomAlignedText {position：relative;}。bottomAlignedText span {position：absolute; bottom：0; left：0; line-height：0.7;}
< body> ; div class =bottomAlignedTextstyle =width：600px; height：600px; border：1px solid;> < span style =font-size：300px;>测试< / span>< / div>< / body> div>
I have an HTML page with somewhat large text elements. I want the text to align to the bottom of the containing div so that it touches the bottom of the div.
I tried following but still there is some space between the text and the bottom. Is there any way I can remove this space and make the text touch the bottom?
Here is a live sample of what I have tried.
<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>
解决方案
You can do this with 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>
这篇关于如何使文本触摸div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
