CODEWITHSUNDEEP
htmlcssspaceword-break
Dave
Dave

Reputation: 19150

Is there any way to make the CSS "break-all" word breaking property smarter?

I’m trying to get my table to fit in a small screen (< 400 pixel width) so I applied this style to my table cells …

#searchResults td {
    padding: 1px;
    word-break: break-all;
}

But my question is, can I make this function smarter? That is, notice in my Fiddle, https://jsfiddle.net/hk42jb5r/1/ , that the first name, “Dave Echoer”, breaks the name into “Dave Echt” and “er” if you reduce the screen to 320 pixels wide. Because there’s a space in the text, it would make more sense for the split to occur at the space. Breaking the word there wouldn’t affect the table width. Is there any way I can get this to happen when its appropriate?

Upvotes: 3

Views: 1195

Answers (3)

Johannes
Johannes

Reputation: 67758

I usually don't use word-break in situations like this, but instead put &shy; tags (= "soft hyphen") into the longer words, at positions where a hyphenation is appropriate, like

 Hydro&shy;philius Pono&shy;clacti&shy;vizius

So this will be displayed in one of the following forms, depending on the width of its container:

Hydrophilius Ponoclactivizius

or 

Hydrophilius Pono-
clactivizius

or 

Hydrophilius 
Ponoclacti-
vizius

or

Hydro-
philius 
Pono-
clacti-
vizius

Upvotes: 0

Oriol
Oriol

Reputation: 288120

It seems you want the behavior of

word-break: break-word;

It is a non-standard property supported by Chrome which behaves almost like word-wrap: break-word. However, when they tried to remove it, they noticed

In some cases (tables and display: table; layouts) the word-break: break-word behavior is different from word-wrap: break-word; and the former works as expected.

The CSS WG resolved to

Add word-break: break-word to spec if Edge/Firefox find it critical enough to Web compat to implement it.

So it may become standard.

But currently, if you want to prevent table cells from being at least as wide as the longest word, and still avoid breaking inside words when it's not necessary, you can use

table-layout: fixed;

Note this will get rid of some special table behaviors, e.g. all columns will be equally wide even if their contents could fit better in other arrangements.

Upvotes: 3

Shannon Young
Shannon Young

Reputation: 1576

I got this working in your example with:

word-break: normal;
overflow-wrap: break-word;

The word-break CSS property is used to specify whether to break lines within words.

Source - Mozilla Developer Network

The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

Source - Mozilla Developer Network

Upvotes: 0

Related Questions