有没有办法让CSS“打破所有”这个词破坏财产更聪明？

Question

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?

Answer 1

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, eg all columns will be equally wide even if their contents could fit better in other arrangements.

Answer 2

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

Answer 3

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

 Hydro­philius Pono­clacti­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