0

我不明白为什么 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

4 回答 4

4

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

http://jsfiddle.net/Tc2wA/

于 2012-10-11T09:46:39.143 回答
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>

这会以这种方式显示您的输出：

无包装

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

于 2012-10-11T09:47:01.293 回答
2

设置height你想要的

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

演示：小提琴

于 2012-10-11T09:46:08.580 回答
0

中的文本div不会溢出，因为它可以简单地换行和扩展divs 高度。如果添加white-space: nowrap;到 css 中，您会看到文本溢出。

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

于 2012-10-11T09:46:59.663 回答