How to hide overflowing content in CSS?

I 开发者_Python百科have a long text and I want to hide that part if it is longer than the div.

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/

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.

Try this:

div {
  overflow: hidden;
} 

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