文本溢出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

回答

相關問題