如何打破表格TD元素中的长单词？答案

【问题标题】：How to break a long word in a table TD element?如何打破表格TD元素中的长单词？
【发布时间】：2022-04-26 20:53:03
【问题描述】：

这里我有一个表格，我想通过更改其单元格宽度（例如，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 作为 fixed 和 word-wrap 作为 break-word，但单元格宽度仍然拒绝更改。你能指出我哪里错了吗？

以下是 JS Fiddle 链接：

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

【问题讨论】：

在 td 上设置最大宽度。例如最大宽度：20px;
这能回答你的问题吗？ force line break in html table cell

标签： html css html-table

【解决方案1】：

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

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

可比较的现代财产将是overflow-wrap: anywhere 或word-break: break-word。我对两者之间的区别不太熟悉，但MDN has a nice breakdown of the related properties（滚动到“结果”以查看它的实际效果）。

【讨论】：

【解决方案2】：

我认为您正在尝试实施此处描述的解决方案： force line break in html table cell 如果要自动换行，则必须添加表格本身的宽度。在您的情况下，将表格的宽度设置为 100% 以创建自动换行的大小相等的列。我准备了一个 80% 宽度和 20px 列 here 的小例子。

<html>
<body>
    <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>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

还有css：

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

【讨论】：

谢谢马吕斯。这似乎工作。我只是想知道是否可以灵活地设置表格宽度，同时能够调整其单个单元格的大小。有趣的是，如果我像 Joseph 提到的那样使用 word-break:break-word 会起作用；但是IE等浏览器不支持。

【解决方案3】：

您可以使用 word-break 属性将一个长单词分成多行。 word-break CSS 属性设置是否在文本溢出其内容框的地方出现换行符。

word-break: break-all;属性指定单词可以在任何字符处中断以防止溢出。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse:collapse; 
    table-layout: fixed;
}
table td {
  border-width: 1px;
  border:solid 1px;
  word-break: break-all;}
</style>
</head>
<body>
<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>
                placeholder
                </td>
            </tr>
        </tbody>
</table>
</body>
</html>

【讨论】：

【解决方案4】：

有很多方法可以做到这一点

● 使用自动换行和最大宽度分词

● 使用自动换行和表格布局分词

● 用分词断词

● 使用 CSS 连字符让断点更优雅

通过以下链接 https://www.design-fluide.com/09-12-2018/how-to-break-long-words-in-an-html-or-css-table/

【讨论】：