Comments on: word-break

By: Alexandre Plennevaux

Alexandre Plennevaux — Thu, 14 Jul 2022 14:09:00 +0000

I'd like to react this:

keep-all: for Chinese, Japanese and Korean text words are not broken. Otherwise this is the same as normal.

Our website has those 3 languages (with English and French). We had complains from our Japanese and Chinese friends regarding using keep-all. Korean feedback is that it is better with keep-all. So my advise would be to use it for korean only. I implement it using the :lang pseudo-class (it requires a correct lang attribute of the htmltag).

:lang(ko) {
    word-break: keep-all;
}

By: Sam

Sam — Sun, 26 Sep 2021 02:53:02 +0000

I’m still getting a fair amount of traffic to an old answer on Stack Overflow https://stackoverflow.com/questions/8186743/what-is-the-best-way-to-break-html-text-on-slashes/21780096#21780096 regarding breaking URLs on slashes …

… any thoughts to add in 2021?

tl;dr in 2014 I suggested inserting a or zero-width space (which can break when copied and pasted into browser)

By: May

May — Tue, 16 Jun 2020 00:34:59 +0000

thanks! this solve the middle word cut off problem that I had ;)

By: Harley Urquhart

Harley Urquhart — Mon, 24 Dec 2018 01:12:27 +0000

In reply to Jiayang Shen. you have not typed -webkit-hyphens: auto; instead you typed webkit-hyphens:auto; that's where your error is. if you make an error in css all the following styles are disregarded

By: Jim

Jim — Fri, 09 Nov 2018 15:37:35 +0000

Does not work with periods :(

By: Lucky Joestar

Lucky Joestar — Sat, 07 Jul 2018 22:25:16 +0000

The “word-break : break-all” parameter is also useful for writing in Runic script, which allows line breaks within words.

By: Jürg

Jürg — Thu, 13 Apr 2017 11:12:58 +0000

In Firefox word-break is not working for inline elements

CSS:
.break {
word-break: break-all;
display:block;
}

By: Michael

Michael — Wed, 28 Dec 2016 21:29:15 +0000

In reply to Dave.

^ From: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

By: kranthi

kranthi — Sat, 15 Oct 2016 12:20:43 +0000

This code works for me wonderfully. 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+ */

By: Jared

Jared — Thu, 08 Sep 2016 15:29:57 +0000

Is there a way to have a word wrap only if it overflows the line? Instead of just having every word at the end of the line break, regardless of length?

By: Shane

Shane — Tue, 31 May 2016 22:46:27 +0000

The example above for hyphenation is incorrect. For Firefox to support automatic hyphenation the word-break behavior must be set to normal. word-break: normal Hyphenation is not supported in Chrome. You can break words in Chrome, without breaking Firefox by using the Chrome-specific notation word-break: break-word. Check out this codepen in both Firefox and Chrome

By: dinesh singh Kunwar

dinesh singh Kunwar — Wed, 13 Jan 2016 15:36:49 +0000

In reply to Rob. shut up

By: amit rajput

amit rajput — Tue, 22 Dec 2015 06:18:51 +0000

note supported hyphens ie10

By: Theo

Theo — Thu, 17 Dec 2015 16:40:00 +0000

In reply to Rob. Does not work on Firefox on Windows either.

By: Johannes

Johannes — Wed, 09 Dec 2015 13:59:24 +0000

In reply to Rob. same here, does not work in firefox on mac!