Question

从html代码下面我想在没有水平滚动条的页面中显示完整的表格。我想设置适合屏幕的html表格宽度。在td中有连续文本，我想打破并以多行显示，使得表格宽度不会超出页面。

为此，我使用了自动换行属性，但它不起作用。请建议我可能的解决方案。

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table style="table-layout:fixed;">
         <tr>
            <td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>  
            <td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>  
         </tr>
    </table>
</body>
</html>

Answer 1

表格（以及进一步的扩展名，单元格）没有收缩，这意味着它会伸展以适应其中的内容，因此没有理由让你的文字被打破。

尝试给你的桌子宽度：

table{
    width:100%;
}

JSFiddle

Answer 2

要使用style="word-wrap: break-word;，您必须修复外部标记宽度。

table{
     width:100%;
}

HTML：Word-Wrap不支持

2 个答案: