CODEWITHSUNDEEP
css
ilhan
ilhan

Reputation: 8954

How to hide overflowing content in CSS?

I have a long text and I want to hide that part if it is longer than the div.

Upvotes: 6

Views: 34764

Answers (3)

Graeme Leighfield
Graeme Leighfield

Reputation: 2985

Set the div with a width or height, (otherwise it won't know whether something is overflowing). Then, add the overflow:hidden; CSS property-value pair.

If using IE, remember to position the element relative so that IE knows how to deal with it.

I wouldn't use ellipsis, as its not fully cross-browser compatible

Demo is here http://jsfiddle.net/vxN8v/1/

Upvotes: 13

Tushar Ahirrao
Tushar Ahirrao

Reputation: 13115

Try this:

div {
  overflow: hidden;
}

Assign some width to div so that if your text flow out of that box will get hidden.

Upvotes: 1

Chris
Chris

Reputation: 10338

use text-overflow: ellipsis;. Note that the containing element needs an explicit width in order for ellipsis to take effect, and you won't get an ellipsis in Firefox.

Upvotes: 3

Related Questions