我有一个 HTML 表格,其中包含 3 个“组”列,左侧、中间和右侧。
+---------------------------------+ | L-1 | L-2 | 中号 | R1 | R2 | +-----+-----+------------+----+----+ | x | z | 啊啊啊... | 1 | 2 | | 是 | w | bbbbbbb... | 3 | 4 | +-----+-----+------------+----+----+
当中间(“M”)列中有一个很长的字符串时,我想将表格限制在浏览器窗口的宽度内。
我尝试在本专栏中使用 CSS 分词,如wordwrap a very long string中所述。
下面是 HTML(示例)。CSS 包含我关于这应该如何(但显然不是)工作的想法。
我究竟做错了什么?
<html> <头部> <样式类型='文本/css'> table { /* 这里什么都没有 - 表是块的,所以应该自动扩展到尽可能大而不引起滚动条吗?*/ } .left { 文本对齐:中心;} .right { 文本对齐:右;} .middle { 文本对齐:左;宽度:100%;/* 将此列扩展到表中的最大大小?*/} .wrap { word-wrap:break-word; 宽度:100%;/* 用完这个 div 所在的整个单元格?*/ } </style> </head> <正文> <表格> <tr> <th class=left>L-1</th> <th class=left>L-2</th> <th class=middle>M</th> <th class=right>R-1</th> <th class=right>R-2</th> </tr> <tr> <td class=left>角</td> <td class=left>讨价还价</td> <td class=middle><div class=wrap>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td> <td class=right>glyp</td> <td class=right>gof</td> </tr> </table> </正文> </html>
现在的结果是没有进行自动换行,而是表格意外地向最右侧射出,并在浏览器窗口中导致滚动条。