CSS overflow not working

Question

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

Actually, it is showing the expected behaviour. What do you expect it to happen? How should it be for you? Just doesn't work won't give the expected stuff. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 11, 2012 at 9:45
You should give it a height property so the text wouldn't try to fit itself within the given width, giving respect to the given height of the cotnainer. — Taher
– Taher, Commented Oct 11, 2012 at 9:46
@AlainZelink: If you see, most of the answers are conveying to use the white-space: nowrap; CSS property. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 11, 2012 at 9:58

Nick H · Accepted Answer · 2012-10-11 09:46:39Z

4

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/

answered Oct 11, 2012 at 9:46

Nick H

11.5k1 gold badge40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 11, 2012 at 9:47

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

Selvamani · Accepted Answer · 2012-10-11 09:52:16Z

2

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

edited Oct 11, 2012 at 9:52

answered Oct 11, 2012 at 9:46

Selvamani

7,7144 gold badges34 silver badges43 bronze badges

Comments

bPratik · Accepted Answer · 2012-10-11 09:46:59Z

0

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.

answered Oct 11, 2012 at 9:46

bPratik

7,0114 gold badges40 silver badges70 bronze badges

Collectives™ on Stack Overflow

CSS overflow not working

4 Answers 4

Comments

Use `white-space: nowrap;` CSS

Code

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

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Use white-space: nowrap; CSS

Code

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

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Use `white-space: nowrap;` CSS