Search code examples
htmlcssspaceword-break

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?

Solution

  • 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.