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

テキストはオーバーフローする前に常に折り返されます。ページは期待どおりに動作しています。常に1行に固定したい場合は、white-space: nowrap.

http://jsfiddle.net/Tc2wA/

于 2012-10-11T09:46:39.143 に答える
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 に答える
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 に答える
0

s の高さdivを単純に折り返して拡張できるため、 のテキストがオーバーフローすることはありません。divcssに追加white-space: nowrap;すると、テキストがオーバーフローすることがわかります。

または、テキストをある程度折り返したい場合はheight: 20px;、スタイルに高さの値を追加するだけです。

于 2012-10-11T09:46:59.663 に答える