CODEWITHSUNDEEP
cssword-wrapline-breaks
Marfola
Marfola

Reputation: 41

Alternative to word-wrap that sets line break

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.

Upvotes: 4

Views: 3620

Answers (3)

Yeti
Yeti

Reputation: 2845

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;).

Upvotes: 1

Aziz Shaikh
Aziz Shaikh

Reputation: 16524

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

Upvotes: 1

Akos
Akos

Reputation: 2007

Maybe

word-break: break-all;

Or

white-space:normal;

Not tested, just remembering from old times :)

Upvotes: 0

Related Questions