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

1
2
3

div {
word-break: keep-all
}

1
2
3

<div style="word-break: keep-all">
Western character set content mixed with a some Asian char content.
</div>

Possible Values

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’.

Anirudha

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
- ram
  
  It will works only when u have to specify width in EM
Geoffrey Lee

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
fekky

It does not work in FF3 .
http://www.css3.com/css-word-break/ name

The word-break is not apply to above word…
http://www.enkognedo.com Matt

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.
piyali

Hey,

style=”word-wrap: break-word;” this property will work in all the browser ……….
June Oh

Webkit engine (Safari & Chrome) does not support the value ‘keep-all’.
Pingback: How should one break long urls in event content? aka too wide tables | amr ical events
http://artisticabode.com Andrea

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.
mani

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 ?
cjk

There you go. Works with browsers that ignore/can’t do CSS, but which can do Unicode:
cjk

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); }
Joel

Confirmed it’s broken for Firefox 3 – 3.6.13. WEAK!
http://www.fusionstream.org fusionstream

word-wrap: break-word is also broken in 3.6.13. Extremely annoying… =/
http://YourWebsite Trupti

@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;
}
Ashkar

You can use this code also :
Western character set content mixed with a some Asian char content.
http://YourWebsite Ashkar

You can use this code also :
word-break: break-all
and a fixed width for div
http://YourWebsite Asit Poddar

“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.
Pingback: Table css, overlapping or disappearing sidebars | amr ical events
http://www.fri-v.com friv

How to break word when data in table…? Thank you for suggestion!
http://www.everesteam.pl Oriflame

Thanks a lot with break word
http://www.seabreezecomputers.com/ hai

plz give me solt for all browsers
benzille

Android device browser word-break not work pls help me

CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog

CSS WORD-BREAK

Example

Possible Values

Sponsors

Properties