0

最近、テーブル セル内のオーバーフロー auto div に関する奇妙な問題に遭遇しました (はい、テーブルを保持する必要があります)。

テーブル内にある場合、div 内のテキストは折り返されません。div を別の div に入れてラップすると、完璧に機能します。

私の一時的な解決策は、JavaScriptを使用して幅を強制することですが、これは貧弱で、サイズ変更をうまく処理できません。

誰かが何か考えを持っているなら、私は聞いてうれしいです.

ここのコードを参照してください：

http://jsfiddle.net/jNZNF/

<table style="width: 400px;" border="1">
<tr><td>
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue;">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\male\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</td></tr></table> 


<div style="width: 400px; border:1px solid pink">
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\mal e\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</div>
4

2 に答える 2

3

word-break:break-allルールをテーブル (またはテーブル内の div) に追加します。基本的に 1 つの長い文字列 (スペースなし) があるため、強制しない限りブラウザーは文字列を壊しません。

jsFiddle の例

于 2013-03-23T16:06:25.060 に答える
1

私があなたを誤解していない限り、これでうまくいくはずです：

<table style="width: 400px;" border="1">
<tr><td>
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue;">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\male\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</td></tr></table>

フィドル: http://jsfiddle.net/ayAh7/1/

<div style="width: 400px; border:1px solid pink">
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\mal e\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</div>
于 2013-03-23T16:07:37.070 に答える