Question

我有一张max-width: 300px;的表格。在Mozilla Firefox，IE和Opera中，如果表的内容超过300像素，它会尝试打破它。如果它不能被破坏，它允许表调整大小超过300像素。如何在Google Chrome中实现此行为？

编辑：

<table style="max-width: 300px; background-color: yellow;">
  <tr><td>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</td></tr>
  <tr><td>LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.</td></tr>
</table>

在Firefox中，表格宽度为625像素。文本是动态生成的。

Answer 1

只需将以下样式添加到表格或单元格

即可

word-break: break-all;

即使没有空格也不会破坏表格宽度，这将迫使工作中断，并且它不会强迫您在表格上设置最小宽度/宽度。

编辑：

这应该会给你想要的行为：

<html>
<head>
    <style type="text/css">
            table {
                width: auto;
            }
    </style>
    </head>
    <body>
    <div style= "max-width: 300px">
        <table style="background-color: yellow;">
            <tr class="text"><td><div>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</div></td></tr>
            <tr class="text"><td>  
                 LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.
            </td></tr>
        </table>
    </div>
    </body>
</html>

允许表格在Google Chrome中展开最大宽度

1 个答案: