CSS溢出不起作用

时间：2012-10-11 09:43:43

标签： css overflow

我不明白为什么div中的简单溢出不起作用。

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<style type="text/css">
.ename {width:400px;overflow:hidden;padding:0 5px 0 5px;color:#EE3129;line-height:25px;text-transform:uppercase;}
</style>
</head>
<body>
<div class="ename"> qksdjlqjsdkqsd qksdjlkqsjdklqsjd qsdkjqslkdjkqsjdklqsjd sdkqsjdkqsjdkqjsdkqd qdlkjqsdkjqskdjkqlsjdkqs qsdkjqskdj </div>
</body>
</html>

谢谢

4 个答案:

答案 0 :(得分：4)

文本将在溢出之前始终换行。您的页面按预期运行。如果您希望它始终坚持一行，您需要white-space: nowrap。

http://jsfiddle.net/Tc2wA/

答案 1 :(得分：2)

设置height你想要的东西

.ename {width:400px;
overflow:hidden;
padding:0 5px 0 5px;
color:#EE3129;
line-height:25px;
text-transform:uppercase;
height: 58px;}

演示：fiddle

答案 2 :(得分：2)

使用white-space: nowrap; CSS

如果您想将文字放在一行而且不应该出去，则需要使用white-space: nowrap; CSS。

代码

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<style type="text/css">
  .ename {width:400px;overflow:hidden;padding:0 5px 0 5px;color:#EE3129;line-height:25px;text-transform:uppercase; white-space: nowrap;}
</style>
</head>
<body>
<div class="ename"> qksdjlqjsdkqsd qksdjlkqsjdklqsjd qsdkjqslkdjkqsjdklqsjd sdkqsjdkqsjdkqjsdkqd qdlkjqsdkjqskdjkqlsjdkqs qsdkjqskdj </div>
</body>
</html>

以这种方式显示你的输出：

Nowrap

演示：http://jsbin.com/ocacuw/1

答案 3 :(得分：0)

div中的文字没有溢出，因为它可以简单地换行并展开div的高度。 如果您将white-space: nowrap;添加到css，您会看到文本溢出。

或者，如果您希望文本在某种程度上换行，只需在样式中添加height: 20px;或任何高度值。

相关问题
最新问题