CODEWITHSUNDEEP
javascriptcss
Leo
Leo

Reputation: 2898

word wrap in css / js

I'm looking for a cross-browser way of wrapping long portions of text that have no breaking spaces (e.g. long URLs) inside of divs with pre-determined widths.

Here are some solutions I've found around the web and why they don't work for me:

Things that look promising but are not quite there:

Does anyone have more ideas on how to tackle this problem?

Upvotes: 41

Views: 50841

Answers (8)

superlogical
superlogical

Reputation: 14970

Css yo!

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

So you should use

.wordwrap {  
    word-wrap: break-word;
}  
  
.no_wordwrap {  
    word-wrap: normal;
}

Upvotes: 35

haytham husni
haytham husni

Reputation: 1

this can fix your problem 

function htmlspecialchars2($string = "", $maxWordLength = 0){
 return  wordwrap($string , $maxWordLength,"\n", true);
 }

Upvotes: 0

Owen
Owen

Reputation: 84593

I've typically handled this using a combination of word-wrap and the <wbr> idea. note there are a few variants. as you can see, &#8203; is probably your best bet for compatibility.

word-wrap browser support isn't terrible, all things considered, Safari, Internet Explorer, and Firefox 3.1 (Alpha Build) all support it (src), so we may not be all that far off.

In regards to the server side breakage, I've used this method pretty successfully (php):

function _wordwrap($text)   {
    $split = explode(" ", $text);
    foreach($split as $key=>$value)   {
        if (strlen($value) > 10)    {
            $split[$key] = chunk_split($value, 5, "&#8203;");
        }
    }
    return implode(" ", $split);
}

Basically, for words over 10 characters, I split them at 5 characters each. This seems to work for all use cases I've been handed.

Upvotes: 28

waj
waj

Reputation: 73

Very similar to Owen's answer, this achieves the same thing server-side in one line: 

return preg_replace_callback( '/\w{10,}/', create_function( '$matches', 'return chunk_split( $matches[0], 5, "&#8203;" );' ), $value );

Upvotes: 0

unkown
unkown

Reputation: 1126

use white-space:normal in css if need to wrap text automatically according to height and width of the component to display hope this may be help full to u .

Upvotes: 0

Artem
Artem

Reputation: 7433

You can use table layout +word-wrap CSS attribute which now works in IE7-8 and FF3.5. It will not solve the issue but at least your design will not be broken.

Upvotes: 0

Osmaan Shah
Osmaan Shah

Reputation:

Using a regular expression in PHP should be faster to breakup long words. I have created a function that handles htmlspecialchars and breaks up words with &shy; Here is the function for anyone who is interested. Just pass the string, and the max word length (leave as 0 if you dont want to break up words with &shy;) and it will return a string with html special chars converted and the words broken up with &shy;

function htmlspecialchars2($string = "", $maxWordLength = 0)
{
    if($maxWordLength > 0)
    {
        $pattern = '/(\S{'.$maxWordLength.',}?)/';
        $replacement = '$1&shy;';
        $string = preg_replace($pattern, $replacement, $string);
    }

    //now encode special chars but dont encode &shy;
    $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&amp;','&quot;','&#039;','&lt;','&gt;'), $string);

    return $string;
}

Upvotes: 0

seanb
seanb

Reputation: 6954

There was a loosely related problem here textarea with 100% width ignores parent element's width in IE7

Don't know if any conclusive solution was ever found, but it seems like the closest was word-break:break-all , which might do the job in Internet Exploder.

I also found this http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html buried in my bookmarks, which indicates a work around for most other browsers, which might help.

CSS3 will be great if it ever gets here...

Hope that helps, will be interested to see what you come up with. Sorry I can't offer anything tested or more specific.

Upvotes: 1

Related Questions