Wordwrap is a very long line

Question

How can you display a long line, website address, word or character set with automatic line breaks to keep the width of the div? This is probably a phrase. Usually adding space works, but is there a CSS solution like word-wrap?

For example, it (very brazenly) overlaps divs, forces horizontal scrolling, etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww www

What can be added to the line above so that it neatly matches it in several lines in a div or in a browser window?

Answer 1

This question has been asked here before:

• stack overflow
• word wrap in css / js
• CSS: how can I make a long line (without any empty one) wrap in XUL and / or HTML .
• CSS overflow with long URL

In short:

As for CSS solutions, you have: overflow: scroll; to make the element show scrollbars and overflow:hidden; to just turn off the extra text. There is text-overflow:ellipsis; and word-wrap: break-word; but they are only IE ( break-word is in the CSS3 draft, so this will be the solution for this in 5 years).

The bottom line is that if it is very important for you to stop this from wrapping text on the next line, the only reasonable solution is to enter ­ (soft hyphen), <wbr> (word break tag) or ​ (zero space width, the same effect as ­ minus a hyphen) on your server side. However, if you're not against Javascript, there is a hyphenator that seems pretty solid.

Answer 2

word-wrap: break-word; Available in IE7 +, FF 3.5 and Webkit browsers (Safari / Chrome, etc.). To handle IE6, you also need to declare word-wrap: break-all;

If FF 2.0 is not in your browser matrix, then using this is a viable solution. Unfortunately, he does not wrap the previous line where the word is broken, which is a typographic nightmare. I would suggest using Hyphenator, as suggested by Paolo, which is unobtrusive JavaScript. Falling back for non-JavaScript users will be a broken word without a hyphen. I can live with it for now. This problem is likely to occur in CMS, where the web designer does not have control over what content will be introduced or where line breaks and soft hyphens can be implemented.

I reviewed the W3 spec , which discusses CSS3 porting. Unfortunately, there are a few suggestions, but nothing concrete yet. It seems that browser developers are still not implementing anything. I tested both Mozilla and Webkit for proprietary code, but there are no signs.

Answer 3

word-break:break-all works with cure

Answer 4

Just mentioned it here , but probably more appropriate for this question. The best property will soon be overflow. and the best value, if implemented, would be:

 * { overflow-wrap:hyphenate. } 

It seems that it is not supported in any case only while writing on iphone or firefox and overflowing: porting does not even work in a working project.

in the meantime, I would use:

 p { word-wrap: break-word; -moz-hyphens:auto; -webkit-hyphens:auto; -o-hyphens:auto; hyphens:auto; } 

Answer 5

 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 width: 200px;  // or whatever is best for you

Answer 6

I use code to prevent all long lines, urls, etc.

  -ms-word-break: break-all; /* Be VERY careful with this, breaks normal words wh_erever */ word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 

Answer 7

Hopefully someday we will get access to the word-wrap property in CSS3: Force Wrapping: the word-wrap property .

Someday...

Answer 8

Usually cells will do this naturally, but you can force this behavior on a div with:

 div { width: 950px; word-wrap: break-word; display: table-cell; } 

Answer 9

Always specify the line-height property - if you do not specify it, this may break your word-break: break-all; property word-break: break-all; .

Answer 10

This seems to do the trick for the latest Chrome:

 [the element], [the element] * { word-wrap: break-word; white-space: pre; } 

I have not tested a single browser other than Chrome.