表格单元格：空白 nowrap 直到满足最大宽度，然后换行

Posted 2023-03-05

【中文标题】表格单元格：空白 nowrap 直到满足最大宽度，然后换行

【英文标题】：Table Cells: white-space nowrap until a max-width has been met, then wrap

【发布时间】：2020-06-05 05:18:41

【问题描述】：

在下面的示例中，我希望单元格在到达max-width 之前不换行。这仍然会导致表格溢出，这是我想要的行为。

main 
  max-width: 600px;
  overflow: hidden;


th 
  background: #ccc;
  padding: 2px 5px;
  white-space: nowrap;
  max-width: 120px;

<main>
  <table>
  <tr>
    <th>One</th>
    <th>One Two</th>
    <th>One Two Three</th>
    <th>Four</th>
    <th>Five</th>
    <th>Six</th>
    <th>Seven</th>
    <th>Seven Eight</th>
    <th>Seven Eight Nine</th>
    <th>Seven Eight Nine Ten</th>
  </tr>
  </table>
</main>

【问题讨论】：

1) 你在说哪个max-width？ 600 或 120。 2) 如果max-width 是600，那么如果你只是在溢出时包装内容，你认为使用nowrap 有什么意义吗？请更清楚地解释您的问题，因为在目前的表格中，它的描述非常糟糕，并且是一篇低质量的帖子。

120 的 th max-width。我希望th 单元格的行为类似于nowrap，直到它们达到120 的宽度，此时我希望它们换行。

也许我直到现在才完全理解这个问题，但是当我们删除 th 选择器的“空白：nowrap”时，我看到了预期的行为（据我所知） . th-cells 会根据文本的数量进行扩展，直到它们达到 120px 宽度。然后文本开始换行，th-width 为 120px。我在这里误会了什么？

【参考方案1】：

这在没有 javascript 的情况下在 css 中是不可能的。 我制作了一个简短的脚本来检查宽度是否大于 119，如果是，则根据需要将该元素样式设置为正常环绕。

 var a = document.querySelectorAll("th");

 a.forEach((a) => 
   if(a.offsetWidth > 119) 
     a.style.whiteSpace = "normal";
   else 
     console.log(a.offsetWidth);
   

 );

---

完整代码

---

html

<main>
  <table>
  <tr>
    <th class="t">One</th>
    <th>One Two</th>
    <th>One Two Three</th>
    <th>Four</th>
    <th>Five</th>
    <th>Six</th>
    <th>Seven</th>
    <th>Seven Eight</th>
    <th>Seven Eight Nine</th>
    <th>Seven Eight Nine Ten</th>
  </tr>
  </table>
</main>

<script type="text/javascript">

     var a = document.querySelectorAll("th");

     a.forEach((a) => 
       if(a.offsetWidth > 119) 
         a.style.whiteSpace = "normal";
       else 
         console.log(a.offsetWidth);
       

     );

</script>

css

main 
  max-width: 600px;
  overflow: hidden;


th 
  background: #ccc;
  padding: 2px 5px;
  white-space: nowrap;
  max-width: 120px;

【讨论】：

也许升级到 CSS 标准可以添加类似white-space: nowrap(max-width: 400);

您必须在样式中添加width: 120px，但是，是的，这是一个 JS 解决方案。

@Dan 是 javascript 不是一个有效的解决方案？

【参考方案2】：

你可以使用这个：

添加word-wrap: break-word; 并删除white-space: nowrap;

CSS：

main 
  max-width: 600px;
  overflow: hidden;


th 
  background: #ccc;
  padding: 2px 5px;
  max-width: 120px;
  word-wrap: break-word;

HTML代码：

<main>
  <table>
  <tr>
    <th>One</th>
    <th>One Two</th>
    <th>One Two Three</th>
    <th>Four</th>
    <th>Five</th>
    <th>Six</th>
    <th>Seven</th>
    <th>Seven Eight</th>
    <th>Seven Eight Nine</th>
    <th>Seven Eight Nine Ten</th>
  </tr>
  </table>
</main>

结果是：

【参考方案3】：

只需删除

white-space: nowrap;

见example