CODEWITHSUNDEEP
htmlcss
user1946932
user1946932

Reputation: 600

CSS word-break: break-all; (only for long words)?

Based on: https://www.w3schools.com/cssref/css3_pr_word-break.asp

Is there any way the example at: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

can give the following:

Thisissomeveryveryv
erylong word. This
text will break at
any character.

rather than:

Thisissomeveryveryv
erylong word. This te
xt will break at any ch
aracter.

?

In other words only break single long words that are wider than the container allows (e.g. 140px) else wrap them to another line if they overflow.

Upvotes: 2

Views: 2511

Answers (1)

Andrew Myers
Andrew Myers

Reputation: 2786

I think you're looking for word-break: break-word; or overflow-wrap: break-word;. Here's how MDN Web Docs describes break-word:

To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

The page goes on to note that it is not supported in Firefox and Internet Explorer.

The Caniuse reference for word-break notes that break-word is unofficial and treated like overflow-wrap: break-word; (overflow-wrap is a synonym of word-wrap).

As it so happens, overflow-wrap seems to have pretty good support, so you'd probably be better off with that instead.

Upvotes: 5

Related Questions