Question

我正在尝试构建一个带有文本范围的简单div。

    <div id="bottom-text">
        <span>ONE STOP</span>
    </div>

这是我为＃34;＃bottom-text＆＃34;生效的简单CSS样式：

    #bottom-text{
        font-weight:700;
        font-size:50px;
        text-align:center;
        margin:auto;
        position:relative;
        padding-top:25px;
        height:65px;
        width:auto;
    }

出于某种原因，文本＆＃34; ONE STOP＆＃34;部分显示在＃bottom-text之外。（只有所有字母的顶部...）我尝试使用填充来修复它，但文本会部分溢出到填充区域！

任何人都可以帮我弄清楚为什么这个文本显示在div应该包含在div之外？（我一直在测试Chrome和Firefox）

谢谢大家。

Answer 1

.largefont {
   color: #0066FF;
   font-family:arial;
   font-size: 6px;
   display: inline;
} 

<span class="largefont">block level span</span>

将一个班级分配给span并使用它。

Answer 2

查看您的代码，#bottom-text高度为65px，font-size为50px，padding-top为25px

65-（50 + 25）= -10 因此，您只会看到文字的前10个像素。

将padding-top设置为较小的数量，然后播放正确

Answer 3

检查你的行高。我唯一能想到的是你可能在其他地方添加一些样式。尝试添加“line-height：1;”到你现有的＃bottom-text CSS，这样你的文本实际上是50px高。或者，如果您希望文本在＃bottom-text中垂直居中，则使您的行高与＃bottom-text（65px）的高度相匹配。

文字溢出的Div

3 个答案: