时间戳

首页 > 解决方案 > 如何打破表格TD元素中的长单词？

html - 如何打破表格TD元素中的长单词？

问题描述

在这里，我有一个表格，我想通过更改其单元格宽度（例如 20px）将一个长单词分成多行，如下所示：

<table cellspacing="0" cellpadding="1" style="border-collapse: collapse;">
        <tbody>
            <tr >
                <td>
                123
                </td>
                <td>123</td>
                <td style="width: 20px;">
                    canyouhelpmebreakintolineswith20pxwidth?</td>
            </tr>
            <tr>
                <td>
                abc
                </td>
                <td>
                def
                </td>
                <td style="width: 20px;">
                placeholder
                </td>
            </tr>
        </tbody>
</table>

CSS：

table {border-collapse:collapse; table-layout:fixed;}
table td {
  border-width: 1px;
  border:solid 1px; 
  word-wrap:break-word;}

我什至将整个列的宽度设置为 20 px，并且我使用 table-layout 作为固定和 word-wrap 作为中断词，但单元格宽度仍然拒绝改变。你能指出我错在哪里吗？

下面是 JS Fiddle 链接：

https://jsfiddle.net/flyingbee2012/nxzjof9d/21/

标签： htmlcsshtml-table

解决方案

你的属性不正确。您似乎正在尝试使用已被删除的旧 Microsoft CSS 属性。

该属性最初是一个非标准且无前缀的 Microsoft 扩展，称为 word-wrap，并由大多数同名浏览器实现。它后来被重命名为overflow-wrap，word-wrap 是一个别名。-MDN _

可比较的现代财产将是overflow-wrap: anywhere或word-break: break-word。我对两者之间的区别不够熟悉，但是MDN 对相关属性进行了很好的细分（滚动到“结果”以查看它的实际效果）。

推荐阅读