Safari CSS Word-Break: Keep-All; Is Not Working

Safari CSS word-break: keep-all; is not working

Update :
Safari now supports keep-all as a value. As of Safari 9.

---

word-break property is partially supported in Safari, i.e it only supports word-break if you use break-all as a value and not keep-all...

As you can see here (Read the note at very bottom) which says

Note: Partial support refers to supporting the "break-all" value, but
not the "keep-all" value.

---

Bug Report 43917 - CSS3 'word-break: keep-all' is not supported

CSS word-break:keep-all not supported?

According to MDN page:

keep-all value is unimplemented in webkit (see WebKit bug 43917).

Similar topic on SO (Check @MrAlien's answer):

• Safari CSS word-break: keep-all; is not working

Undocumented word-break: break-word CSS property?

As far as I know word-break: break-word; is non-standard, webkit only. It can be found on Safari CSS Reference

word-break Specifies the level of strictness when breaking lines of
text in ideographic languages such as Chinese, Japanese, and Korean.

Syntax word-break: strictness Parameters strictness The level of
strictness. Constants break-all, break-word, normal Availability
Available in Safari 3.0 and later. Available in iOS 2.0 and later.
Support Level Stable CSS 3.

word-wrap break-word does not work in this example

Mozilla Firefox solution

Add:

display: inline-block;

to the style of your td.

Webkit based browsers (Google Chrome, Safari, ...) solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

Note:
Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.

Opera solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

The previous paragraph applies to Opera in a similar way.

Unwanted word break in Safari

white-space: nowrap; should fix it.

Further information.

CSS word-break does not work correctly in Microsoft edge

word-break: break-word is deprecated, and not supported by MS Edge or MS IE. See mozilla documentation about this.

word-break is supported by MS Edge and MS IE Here is a list of supported browsers.

Valid MS Edge and MS IE word-break properties are:

word-break: normal|break-all|keep-all|initial|inherit|unset;

---

Alternatively mozilla documentation specifies that overflow-wrap: break-word; acts the way that you want word-break: break-word to function.

---

Related Topics