HTML/CSS div styling overflow

Question

I have a div with 0 height, but the text is not cutoff, only the div box. Example:

<div style="width:200px;height:10px;background-color:red;">
Text
</div>

I want it to cutoff the text to not overflow out of the div.

This is what it looks like:

*image1*

And this is what I want it to look like:

what happens if you use overflow:hidden ?

Dips
– Dips

2012-07-24 01:47:44 +00:00
Commented Jul 24, 2012 at 1:47 — Dips
– Dips, Commented Jul 24, 2012 at 1:47
@Dips it must be the answer.. :)

Asif
– Asif

2012-07-24 01:50:04 +00:00
Commented Jul 24, 2012 at 1:50 — Asif
– Asif, Commented Jul 24, 2012 at 1:50

Kush · Accepted Answer · 2012-07-24 01:47:41Z

1

Add this to the main div

overflow:hidden;

answered Jul 24, 2012 at 1:47

Kush

1,5222 gold badges17 silver badges32 bronze badges

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

Comments

Jason Gennaro · Accepted Answer · 2012-07-24 01:48:28Z

1

You need to use overflow:hidden;

Here is an example: http://jsfiddle.net/v4ykN/

This is a good overview of the overflow property: http://css-tricks.com/the-css-overflow-property/ with some good info to remember:

bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source). So for example a user has their default font size set larger than you would expect, you may be pushing text outside of a box and hiding it completely from their view.

answered Jul 24, 2012 at 1:48

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

Rangappa Tungal · Accepted Answer · 2012-07-24 09:39:51Z

1

Please Use Overflow:hidden in css Refer this example http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

answered Jul 24, 2012 at 9:39

Rangappa Tungal

2552 gold badges5 silver badges14 bronze badges

Comments

Andrew Barber · Accepted Answer · 2013-02-11 22:37:16Z

0

You must use overflow:hidden; Good luck with what you are doing

edited Feb 11, 2013 at 22:37

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Feb 11, 2013 at 22:34

Rahul

114 bronze badges

2 Comments

Andrew Barber Over a year ago

This answer has already been posted numerous times. You do not add anything of value with this answer.

Rahul Over a year ago

I'm terribly sorry, i'm very new to this website, wont happen again :)

Collectives™ on Stack Overflow

HTML/CSS div styling overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related