文本溢出Div

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

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

这里是简单的CSS样式我有效果的“＃底文”：

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

出于某种原因，文本的“一站式”显示部分以外的＃自下而上文本。（只有所有字母的顶部...）我试着用填充来修复它，但文本部分溢出到填充区域！

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

谢谢大家。

来源

2012-08-09 Shawn Taylor

对我来说似乎很好。 – 2012-08-09 15:58:39

在这里看起来很好http://jsfiddle.net/j08691/zYFfL/ – j08691 2012-08-09 15:58:51

看看你的代码中，#bottom-text是65px高度，font-size是50像素，而padding-top是25px的

65-（50 + 25）= -10 所以，你只能看到前10像素的文本。

设置padding-top较轻量，只有这样它是正确的发挥

来源

2012-08-09 16:01:05 Mark

我试着改变它，但它似乎仍然溢出？看来跨度完全忽略了div容器。其奇怪的是，当我在Dreamweaver中测试它时它工作正常。也许只是一个错误或其他东西，但我不确定... – 2012-08-09 16:05:45

实际上，填充会增加元素的高度，所以＃bottom-text是65 + 25（90px）高。我会说行高可能与这个问题有关。 – jmotes 2012-08-09 17:55:24

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

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

指定一个类的span并与发挥。

来源

2012-08-09 16:02:45

检查你的线条高度。只有我能想到的是，你可能在别处添加了一些样式。尝试添加“line-height：1”。到您现有的＃底部文本CSS，以便您的文本实际上是50px高。或者，如果您希望文本垂直居中＃底部文本，请使您的行高匹配＃底部文本（65px）的高度。

来源

2012-08-09 17:59:43 jmotes

文本溢出Div

回答

相关问题