Word Wrap Long Text

From CSS Discuss

Jump to: navigation, search

Long text breaking CSS layout

Does anyone know how to force word wrapping of long text? This is a problem with CSS layouts that use floated divs. If there is long text, in IE (not Mozilla or Safari) the width of the div is not respected and pushed out, causing there not to be enough space for the non-floated div. Say you have two divs, the first div floated left and the second div not floated at all, but with a fixed width. If you have

test Of The LongestURLI Could Think Of To Make This Not Wrap And Cause A Table Or Div To Overflow

in the first div (column) and the width is 250px. The word does not wrap and does not leave enough room for the second div. The second div ends up going to the bottom of the first div. I found an IE proprietary css item called word-wrap that you can use to make long text wrap.

word-wrap: break-word;

However it only works if the direct parent of the long text has a width set. If you set the width on a div and the long text is in an li of an unorded list, the text will not word wrap unless you have set the width of the li.

Mozilla just lets the text go out of the bounds of the parent div. This is also not really acceptable since I want to keep all the text in the wrapping div. I could use overflow, but that would also cause a problem because the word would then be truncated. Also if a table is used in the div for tabular data, then the long text makes the table too wide for the div and overflow truncates everything in the table.

Any ideas?

You could use ­ to break up the long word. If you don't have control over the content, Java Script should be able to do what you want.

Word Wrap Through Entire Document (IE only)

If you put the CSS item:

word-wrap: break-word;

Into the body definition of the stylesheet the break-word property works throughout the entire document. This only works in IE. However, the CSS3 specification has accepted the word-wrap property, so once browsers supports CSS3, this property should be usable.



Word-Wrap Works with other than IE also

word-wrap: break-word; works with browser (test with IE 8, Chrome 3.0.195.0.27 , Firefox, Safari 4.0.3)

for more info go to : http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx

Personal tools