html - 文本溢出分区

Question

我正在尝试构建一个简单的 div，其中包含一段文本。

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

这是我对“#bottom-text”有效的简单 CSS 样式:

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

出于某种原因，文本“ONE STOP”部分显示在#bottom-text 之外。 (只有所有字母的顶部......)我试过使用填充来修复它但是文本然后部分溢出到填充区域!

谁能帮我弄清楚为什么这个文本显示在它应该包含在其中的 div 之外？ (我一直在测试 Chrome 和 Firefox)

谢谢大家。

Answer 1

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

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

为 span 分配一个类并使用它。