CODEWITHSUNDEEP
cssoverflow
Alain Zelink
Alain Zelink

Reputation: 899

CSS overflow not working

I don't see why a simple overflow in a div doesn't work.

<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>

Thank you

Upvotes: 0

Views: 3402

Answers (4)

Selvamani
Selvamani

Reputation: 7684

set height what ever you want

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

Demo: fiddle

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Use white-space: nowrap; CSS

If you want to make the text in a single line and it shouldn't go out, you need to use white-space: nowrap; CSS.

Code

<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>

And that shows your output this way:

Nowrap

Demo: http://jsbin.com/ocacuw/1

Upvotes: 2

bPratik
bPratik

Reputation: 7019

The text in the div is not overflowing because it can simply wrap and expand the divs height. If you add white-space: nowrap; to the css, you will see that the text overflows.

Or, if you want the text to wrap to some extent, just add height: 20px; or any height value to the style.

Upvotes: 0

Nick H
Nick H

Reputation: 11535

Text will always wrap before it overflows. Your page is behaving as expected. If you want it to always stick to one line, you'll want white-space: nowrap.

http://jsfiddle.net/Tc2wA/

Upvotes: 4

Related Questions