如何自动将 HTML 表格单元格内的文本换行？答案

【问题标题】：How can automatically wrapped to a new line the text inside an HTML table cell?如何自动将 HTML 表格单元格内的文本换行？
【发布时间】：2020-03-31 22:14:27
【问题描述】：

我在 HTML 中有以下问题。

我的这张表只包含一个标题：

<table border="1" class="table_legenda" width="100%">

    <thead>
    <tr>
        <th width="8.33%">Codice</th>
        <th width="2%">Stato</th>
        <th width="8.33%">Creazione<</th>
        <th width="8.33%">Registrazione</th>
        <th width="6.33%">Autore Cr</th>
        <th width="6.33%">Autore Con</th>
        <th width="6.33%">Autore Acq</th>
        <th width="8.33%">Totale Imponibile</th>
        <th width="24.66%">Fornitore</th>
        <th width="4.33%">RM riserva</th>
        <th width="8.33%">Errore</th>
        <th width="8.33%">Azione</th>
    </tr>
    </thead>
</table>

现在，如您所见，每个单元格都设置了百分比宽度并包含文本值。

我的问题是，如果单元格的文本值长于单元格的可用空间，它将自动隐藏。我希望文本自动换行。

如何才能获得这种行为？

Tnx

【问题讨论】：

你的意思是这样？ - jsfiddle.net/js1zjm0x
发布的代码不会导致文本被隐藏。相反，列设置得足够宽。 width 设置与建议的最小宽度一样。除非您以某种方式阻止它，否则文本会在需要时自动在单词之间换行。请发布一个实际演示问题的案例，并解释您认为允许的换行符。（单词之间？带有连字符的单词内部？野蛮地在任意点？）

标签： html css xhtml html-table

【解决方案1】：

您需要将表设置为具有table-layout:fixed 和th 元素为overflow-wrap:break-word

.table_legenda {
  table-layout: fixed;
}
.table_legenda th {
  overflow-wrap: break-word;
}

<table border="1" class="table_legenda" width="100%">
  <thead>
    <tr>
      <th width="8.33%">Codice</th>
      <th width="2%">Stato</th>
      <th width="8.33%">Creazione</th>
      <th width="8.33%">Registrazione</th>
      <th width="6.33%">Autore Cr</th>
      <th width="6.33%">Autore Con</th>
      <th width="6.33%">Autore Acq</th>
      <th width="8.33%">Totale Imponibile</th>
      <th width="24.66%">Fornitore</th>
      <th width="4.33%">RM riserva</th>
      <th width="8.33%">Errore</th>
      <th width="8.33%">Azione</th>
    </tr>
  </thead>
</table>

http://jsfiddle.net/ma4bc7zj/ 上的演示

【讨论】：

好的，这很有趣，但我想用整个单词而不是在单词中间换行。我可以吗？
@AndreaNobili，当它以明显不可接受的方式（如您所说）破坏事物（单词）时，您为什么要接受答案？
@AndreaNobili 您的初始代码将表现出您描述的行为。如果它们不适合单行，它将在单词之间自动换行。