Question

我最近遇到一个奇怪的问题，表格单元格中有溢出的自动div（是的，我必须保留表格）。

div中的文本在表格内部时不会换行。如果我将div放在另一个div中进行换行，那就完美了。

我的临时解决方案是使用javascript强制宽度，但这很差，并且不能很好地处理重新调整大小。

如果有人有任何想法，我会很高兴听到。

请参阅此处的代码：

<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>

Answer 1

将word-break:break-all规则添加到您的表格（或表格中的div）。由于你基本上有一个长字符串（没有空格），浏览器不会破坏它，除非你强制它。

<强> jsFiddle example

Answer 2

除非我误解你，否则应该这样做：

<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>

文本未包装在overflow：auto; width：100％div，当它在表中时

2 个答案: