Force word-break with hyphens with CSS if and only if there isn't enough room for the whole word on the next line

Question

Not sure if I'm wording this right.

Right now I'm using the following CSS to hyphenate long words on my web page, which works pretty well:

overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

What I would like, however, is to have a fallback that attempts to push the whole word (and subsequent words) to the next line if the next word can fit the line, as opposed to breaking/hyphenating any word near the edge of my container, regardless of length.

Basically, here's what's going on:

-----------------------
The quick br-
own fox jumps ov-
er the lazy dog
Somereallyrdic-
oulosly long word
-----------------------

What I would like is:

-----------------------
The quick
brown fox jumps
over the lazy
dog
Somereallyrdic-
oulosly long word
-----------------------

Is this possible with CSS?

user_14012542 · Answer

It is possible with html . Unfortunately it does not read minds - hard code is necessary.
In any place in which you let a word break put with no spaces - it is invisible in html. If the word doesn't fit - it will break with a nice hyphen at this point.
(I don't know where from are - in your example - my browser just breaks)

word-wrap, word-break and hyphens are useful for long links (and aren't full supported). You can use a combination if needed

p{ width: 100px; border: 1px solid red; margin: 0 50px; display: inline-block}

The quick brown fox jumps over the lazy dog. Somereallyridicoulosly long word

This_one_is_without_shy Auxerunthaecvulgisordidiorisaudaciam, quodcumingravesceretpenuria

Force word-break with hyphens with CSS if and only if there isn't enough room for the whole word on the next line

1 Answers