Geek Answers Handbook

An alternative to word wrap that sets line breaks

I need to wrap a long line and require that the strong ones break when the line breaks. The solution must be supported by all browsers.

The gap in bs and d should occur as follows:

Aaaa Bbbbbb bbbbbbbbbb Ccccc Dddddd ddddddddddd

The word-wrap: break-word tag breaks a string, but does not fill the string before breaking. Here's what happens:

 Aaaa Bbbbbb Bbbbbbbbbb Ccccc Dddddd ddddddddddd

The word-break: break-all tag does exactly what I need, but it doesn’t work in Firefox and ie7 and below. It works only in Chrome, Safari and ie8.

The text-wrap tag does exactly what I need, but is not yet supported by any browser.

Any suggestions?

FYI: Im currently managing a PHP break.

+4
source share
3 answers

Using PHP, insert ​ where you want to put a line break. This is a zero-width space character .

+1
source

A possible solution is to replace your white spaces with an unsafe space character:  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #container { word-wrap: break-word; width: 100px; background-color: rgb(200, 200, 200); font: 14px monospace; } </style> </head> <body> <div id="container"> Aaaa&nbsp;Bbbbbbbbbbbbbbbb Ccccc&nbsp;Ddddddddddddddddd </div> </body> </html>

It is very important to note: For the behavior described by you to also work in textarea's:

 <textarea onkeyup="this.value = this.value.replace(/ /gi, '\u00A0');"></textarea>

This will replace regular spaces with indestructible spaces ( &nbsp; ).

+1
source

Can

 word-break: break-all;

or

 white-space:normal;

Not tested, just remembered from ancient times :)

0
source

More articles:


All Articles