私は小さな画面（< 400ピクセル幅）に収まるように私のテーブルを取得しようとしているので、私は私のテーブルのセルにこのスタイルを適用...CSSを "ブレークオール"の単語分割プロパティをスマートにする方法はありますか？
#searchResults td {
padding: 1px;
word-break: break-all;
}
しかし、私の質問は、私はこの機能をスマートに行うことができます？つまり、私のフィドルであるhttps://jsfiddle.net/hk42jb5r/1/には、画面を320ピクセル幅に縮小すると、名前が「Dave Echoer」で「Dave Echt」と「er」に分割されるという通知があります。テキストにはスペースがあるので、スペースでスプリットが発生するのがより理にかなっています。言葉を壊すことはテーブルの幅に影響しません。適切なときにこれが起こるような方法はありますか？
あなたがそれはほとんどword-wrap: break-wordように振る舞うクロームでサポートされている非標準のプロパティです
word-break: break-word;
の振る舞いをしたいようです。ただし、期待どおりときthey tried to remove it、彼らはいくつかの例（表やdisplay: table;レイアウト） word-break: break-word行動が word-wrap: break-word;とは異なり、かつての作品で
に気づきました。
CSS WG resolved
にエッジ/ Firefoxがそれを実現するためにcompatのWebへの十分なそれ重要 を見つけた場合仕様に
word-break: break-wordを追加します。
標準になる可能性があります。
しかし、それは必要はありませんと、現在、あなたは少なくとも同じ幅の最も長い単語としてあることから、テーブルセルを防ぎ、まだ言葉内部で破壊を回避したい場合は、
table-layout: fixed;
注意を使用することができますこれは、いくつかの特別なテーブルの振る舞いを取り除きます。たとえその内容が他の取り決めにうまく収まるものであっても、すべての列が等しく広がっています。
私はあなたの例では、この作業を得た：word-break CSSプロパティは言葉内の行を分割するかどうかを指定するために使用され
word-break: normal;
overflow-wrap: break-word;
。
ソース - Mozilla Developer Network
overflow-wrapプロパティは、それ以外の場合は割れない文字列が入っている箱に収めるには長すぎるとき、ブラウザがオーバーフローを防止するために、言葉の中の線を破ることかどうかを指定するために使用されます。
私は
Hydro­philius Pono­clacti­vizius
­タグを置きます
だから、これはそのコンテナの幅に応じて、次のいずれかの形式で表示されます。
Hydrophilius Ponoclactivizius
または
Hydrophilius Pono-
clactivizius
または
Hydrophilius
Ponoclacti-
vizius
または
Hydro-
philius
Pono-
clacti-
vizius
これは別の質問に対する良い答えです。私は単語が壊れたときにOPがハイフンをそこに望んでいるとは思わない。 –
しかし 'オーバーフローラップ：ブレークword'は最長の単語より狭い縮小から細胞を許可していません。この場合、私はそれを使用しない場合と比較して差異は見ません。 – Oriol