Search within TutorialsPark

CSS Text Overflow


Use CSS control the overflow of text that is too long to fit into the available space.


CSS Text: word-wrap

ThiswordismeanttobelargeenoughtodemonstratewordwrapProperty

word-wrap:

1. CSS property word-wrap enables the browser to handle conditions where the word is longer than the width of the containing block.

2. The possible value for word-wrap is as follows:

normal The word is not broken even when it overflows the containing element. Lines break only at normal break points

break-word The word is not broken. Lines may break at the arbitary points if no break point is found

Example: CSS Text - word-wrap

Give it a TRY! » Note: It can be used for long scientific terminologies which should be read as a single word.


CSS Text: text-overflow

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. - Steve Jobs

text-overflow:

1. For condition where in the text overflows the container you can decide how to clip the overflowing text using text-overflow

2. The value of text-overflow can be

clip : Clips the text when it overflows the box.

ellipsis : The overflowing text is denoted with an ellipsis.

Example: CSS Text - text-overflow

Give it a TRY! » Note: Latest versions of all browsers support CSS property of text-overflow .