表格数据溢出框[关闭]答案

【问题标题】：Table data overflow the box [closed]表格数据溢出框[关闭]
【发布时间】：2016-04-23 21:43:22
【问题描述】：

请任何人帮助我表格 td 溢出框请修复它。

**https://jsfiddle.net/Baloch007/njvLxzrp/**

【问题讨论】：

jsfiddle 链接在这里jsfiddle.net/Baloch007/njvLxzrp
问题应该包含minimal reproducible example在问题本身。没有它，这对未来的读者毫无用处。

标签： html css

【解决方案1】：

这是因为单词之间没有空格，默认情况下单个单词总是一行。

如果您想根据表格单元格宽度中断工作，请使用word-break:break-all; css

.device-information td {
  float: left;
   border:solid 1px #cecece;
   height:35px;
  width: 100%;
  word-break:break-all;
}

例如：https://jsfiddle.net/njvLxzrp/1/

但是，如果你在整个表格中应用这个 css，这可能会产生问题，所以我建议你给那个单元格上课，然后像这样应用 css

HTML

<table class="device-information">
    <tbody>
        <tr>
            <th>Device Name</th>
            <td class="longWord">alfalahhajshfjdhfjahdjfhdjhfjdhfjdhfjdhfjhdfjasfdfasdfdsafdasf</td>
            <td>alfalah</td>
            <td>alfalah</td>
            <td>alfalah</td>
            <td>alfalah</td>
            <td>alfalah</td> 
        </tr>
    </tbody>
</table>

CSS

.device-information td.longWord {
   word-break:break-all;
}

【讨论】：

回答未正确提出的问题会鼓励更多问题。由于 Stack Overflow 旨在成为知识库，而不是实时帮助站点，因此这类问题及其答案不会提供长期价值，并且可能会关闭并最终删除。不回答他们可以避免沮丧。见：Should one advise on off topic questions?

【解决方案2】：

如果您不介意不显示整行文本而只表示还有更多，您可以添加这些行

white-space:no-wrap;
overflow:hidden;
text-overflow:ellipsis;

到第 28 行的.device-information td

https://jsfiddle.net/vhnrn72z/

【讨论】：

回答未正确提出的问题会鼓励更多问题。由于 Stack Overflow 旨在成为知识库，而不是实时帮助站点，因此这类问题及其答案不会提供长期价值，并且可能会关闭并最终删除。不回答他们可以避免沮丧。见：Should one advise on off topic questions?

【解决方案3】：

.device-information td {
  float: left;
  border:solid 1px #cecece;
  min-height:35px;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
    -ms-word-break: break-all;

}

min-height: 35px 确保每个 td 保持至少 35px 的最小高度。

溢出换行：断字；和自动换行：break-word；从字面上看，只是彼此的替代名称。一些浏览器支持其中一个而不支持另一个。

word-break: break-all 用于要求 CJK（中文、日文和韩文）文本的特定行为，而 word-wrap:break-word 更通用所以，我的建议是，同时使用 3 个。

【讨论】：