CSS WORD-BREAK
This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.
Example
div { word-break: keep-all }
<div style=”word-break: keep-all”>Western character set content mixed with a some Asian char content.</div>
Possible Values
| Value | Description |
| normal | Normal line breaking behavior for the language is used. |
| break-all | Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines. |
| keep-all | Useful where content contains a minority of Asian character set content, to which content is not broken across lines. For non-Asian character set content, this value behaves like ‘normal’. |
22 Responses
Hi
I would like to know if this propery is supported in Mozilla Firefox, Netscape and Opera browsers?
I checked it in in IE and FF, it seems to be working ok in IE but not in FF
Regards,
Anirudha
Based on my own tests…
This property is supported by IE6, IE7, Chrome, and Safari 3.1.2
It does not work in FF3 and Opera 9.52
It does not work in FF3 .
It will works only when u have to specify width in EM
The word-break is not apply to above word…
Thank you for this! Helped me out tremendously when all else seemed to fail. I was using all the flavors or “work-wrap:xxxx”, but I could only get the page to render appropriately in FF; Chrome and IE8 blocks ran over into my other blocks every single time before I used “word-break: break-all” with Geshi.
The “white-space: pre-wrap” worked for FF from the get-go.
Hey,
style=”word-wrap: break-word;” this property will work in all the browser ……….
Webkit engine (Safari & Chrome) does not support the value ‘keep-all’.
[...] word-break: (normal, break-all, keep-all) aimed at dealing with mixed character sets. Random Break Point. [...]
If this didn’t work in FF3 in the past, it does work now with version 3.6.12. You do need to assign a width value on the element in addition to word-break.
i tested this with FF 3.6.12. NOT WORKING :(
But i found it works with IE 6, safari 5.0.1, chrome 7.0.517. Any work around for FF ?
There you go. Works with browsers that ignore/can’t do CSS, but which can do Unicode:
It *had* to happen that this wonky css3.com failed to encode the <?php ?> part. So again:
function spacify($s) { return preg_replace(‘/(.)/’, ‘$1′.chr(0x200B), $s); }
Confirmed it’s broken for Firefox 3 – 3.6.13. WEAK!
word-wrap: break-word is also broken in 3.6.13. Extremely annoying… =/
@Matt – cant be more thankful to you after trying hard for 2 days finally word wrap is working for me in MVC application in chrome using :
.classname
{
border-top: 1px solid #999;
padding: 5px;
max-width: 500px;
white-space: pre-wrap;
}
You can use this code also :
Western character set content mixed with a some Asian char content.
You can use this code also :
word-break: break-all
and a fixed width for div
“World” (a word) that you have to break in letter in php like as below:
w
o
r
l
d
please help me any one. Please call me 9903782167.
[...] word-break: (normal, break-all, keep-all) aimed at dealing with mixed character sets. Random Break Point. [...]
How to break word when data in table…? Thank you for suggestion!
Thanks a lot with break word