CODEWITHSUNDEEP
csstextoverflow
Tom Gullen
Tom Gullen

Reputation: 61773

CSS stop text overflowing

I'm writing a dynamic application and one problem I have is that I have text contained inside a div, and browsers behave funny when the size of the div is too small to contain the text.

Is there anyway to make the text 'cutoff' in CSS? Any text that doesn't fit, is removed.

Upvotes: 3

Views: 7474

Answers (5)

Chirag Tilwani
Chirag Tilwani

Reputation: 1

if you want extra content to be clipped off than you can use overflow : hidden; but you want that extra content should come in new line you can use word-wrap : break-word; and if you want that extra content should hide but not clipped off and that content can be read using scrollbar use overflow : auto;

Upvotes: 0

Andrade
Andrade

Reputation: 1199

 /*ellipsis stuff*/
    white-space: nowrap;
    overflow: hidden;
    text-transform: none;
    text-overflow: ellipsis;  /* IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+*/
    -o-text-overflow: ellipsis;  /* for Opera 9 & 10 */
    -ms-text-overflow: ellipsis; /*IE 8*/

obs: also set the width with the preferred size

Upvotes: 1

keirog
keirog

Reputation: 2178

Unfortunately there isn't an entirely CSS solution to that problem (without seeing partially-rendered text). The nearest thing would be to use the CSS3 property, text-overflow: ellipsis, which will clip the string and add '…' to the end. The biggest drawback of this technique is that Firefox doesn't currently support it, and it doesn't look like it will in the near future either. However, there is an alternative and less elegant solution for Firefox that you could use for the time being.

More info:
W3C text-overflow specs (still a working draft)
Browser support for text-overflow
Track the status of Firefox support for text-overflow

Upvotes: 1

wajiw
wajiw

Reputation: 12269

have you tried overflow: hidden; ?

Upvotes: 3

casablanca
casablanca

Reputation: 70721

Use overflow: hidden

Upvotes: 5

Related Questions