3

表を小さな画面 (< 400 ピクセル幅) に収まるようにしようとしているので、このスタイルを表のセルに適用しました...</p> 

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

しかし、私の質問は、この関数をよりスマートにすることはできますか? つまり、私の Fiddle https://jsfiddle.net/hk42jb5r/1/で、画面を 320 に縮小すると、最初の名前「Dave Echoer」が「Dave Echt」と「er」に分割されることに注意してください。ピクセル幅。テキストにはスペースがあるため、スペースで分割する方が理にかなっています。そこの単語を壊しても、テーブルの幅には影響しません。適切なときにこれを実現する方法はありますか?

4

3 に答える 3

3

の動作が必要なようです

word-break: break-word;

これは、Chrome でサポートされている非標準のプロパティであり、ほとんどのように動作しword-wrap: break-wordます。しかし、彼らがそれを取り除こうとしたとき、彼らは気づいた

場合によっては (テーブルとdisplay: table;レイアウト) word-break: break-word動作が異なり word-wrap: break-word;、前者は期待どおりに動作します。

CSS WG は次のように解決しました。

word-break: break-wordEdge/Firefox が Web 互換性を実装するのに十分重要であると判断した場合は、仕様に追加してください。

だからスタンダードになるのかもしれません。

しかし、現在、表のセルが少なくとも最長の単語と同じ幅になるのを防ぎたい場合、必要でない場合は単語の内側を分割しないようにするには、次を使用できます。

table-layout: fixed;

これにより、一部の特別なテーブルの動作が取り除かれることに注意してください。たとえば、すべての列の幅が、他の配置でより適切に収まる場合でも、すべての列が等しくなります。

于 2016-10-04T22:45:00.717 に答える
0

私は通常、このような状況では単語区切りを使用しませんが、代わりに&shy;タグ (= "ソフト ハイフン") を長い単語に入れます。ハイフネーションが適切な位置には、

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

したがって、コンテナの幅に応じて、次のいずれかの形式で表示されます。

Hydrophilius Ponoclactivizius

また

Hydrophilius Pono-
clactivizius

また

Hydrophilius 
Ponoclacti-
vizius

また

Hydro-
philius 
Pono-
clacti-
vizius
于 2016-10-05T00:18:11.203 に答える