Alternative to word-wrap that sets line break

4
votes

I need to wrap a long string and want the strong to break at the line break. The solution must be supported by all browsers.

The break in the b’s and d’ should occur as follows:

Aaaa Bbbbbb
bbbbbbbbbb
Ccccc Dddddd
ddddddddddd

The tag word-wrap:break-word breaks a string but doesn’t fill the line before the break. Here’s what happens:

Aaaa 
Bbbbbb
Bbbbbbbbbb
Ccccc 
Dddddd
ddddddddddd

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

The text-wrap tag does exactly what I need but isn’t yet supported by any browser.

Any suggestions?

FYI: I’m currently managing the break with PHP.

3
cssword-wrapline-breaks

3 Answers

1
votes

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

1
votes

A possible solution is to replace your white spaces with a nonbreakable whitespace 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>

Quite important note: To let the behaviour as you described also work in textarea's:

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

This will replace normal spaces with nonbreakable spaces (&nbsp;).

0
votes

Maybe

word-break: break-all;

Or

white-space:normal;

Not tested, just remembering from old times :)