-1

テーブルがコンテナーからオーバーフローするという問題があります。動的コンテンツを含む pre を含む 1 つのセルがあり、このセルにより、テーブルがその親を超えて拡張されます。テーブルがオーバーフローしないように強制的に行を折り返すだけでよいと思います。私は試した：

pre.content {
    white-space: pre-wrap;
}

コンテンツをラップするだけでなく空白を保持するためですが、これは、単語がその境界を超えて拡張された後にのみブレークを挿入するようです。コンテナを出る前に単語をラップしたい。単語の途中で改行できることはわかってword-wrap: break-word;いますが、これにより非常に読みにくくなっています。

私はまだ CSS の内外をすべて学習しようとしているので、間違った診断をする可能性があります。テーブルはデフォルトで親内にとどまる必要があると想定しているため、テーブルには幅が設定されていません。私は自分が間違っていると思い始めています。幅を 100% に設定しようとしましたが、すべてのセルの幅が同じになるように見えますが、これは私が望むものではありません。したがって、正しいラッピングを取得すると問題が解決すると思います。

うまくいけば、誰かが助けてくれるでしょう！

4

1 に答える 1

1

このjsフィドルがあなたが行ったことの正確な表現であると仮定します: http://jsfiddle.net/xDMYR/2/

テーブルに固定幅を指定しない限り、テーブルはコンテンツを含むように拡張されます。例からわかるように、2 番目のテーブルは、コンテンツが大きすぎるため、含まれている div よりも大きく拡張されています。ただし、最初のテーブルにはコンテンツに対して大きすぎる単語がないため、それに応じて単語が折り返されています。

提供したスペースに対してコンテンツが大きすぎる必要があります。解決策は、動的テーブル セル内のコンテンツを短くすることです。または、3 番目のテーブルに示すように単語を強制的に分割することもできます。ただし、これはいくつかの奇妙な結果をもたらします。

参考までに、このコードは次のとおりです。

-ms-word-break: break-all;
 word-break: break-all;
 word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

単語区切り/折り返しの詳細については、こちらをご覧ください: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

于 2013-09-10T10:08:19.330 に答える