Css 表格单元格：在达到最大宽度之前，立即空白，然后换行

在下面的示例中，我希望单元格在达到

最大宽度之前不包裹。这仍然会导致表溢出，这是我想要的行为


main{
最大宽度：600px；
溢出：隐藏；
}
th{
背景：#ccc；
填充物：2px 5px；
空白：nowrap；
最大宽度：120px；
}

一个
一二
一二三
四
五
六
七
七八
七八九
78910
如果没有javascript，这在css中是不可能的。
我制作了一个简短的脚本，检查宽度是否大于119，如果大于119，则根据需要将元素样式设置为正常环绕

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

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

 });



完整代码

html

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

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

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

 });



完整代码

html

您可以使用以下选项：
添加
换行：断开单词并删除
空白：nowrap

Css:
Html代码：

一个
一二
一二三
四
五
六
七
七八
七八九
78910

结果是：
您可以使用以下功能：
添加
换行：断开单词并删除
空白：nowrap

Css:
Html代码：

一个
一二
一二三
四
五
六
七
七八
七八九
78910

结果是：
只需移除

white-space: nowrap;

看

只需移除

white-space: nowrap;

看

1）你说的最大宽度是哪个<代码>600
或
120
。2） 如果
max width
是
600
，那么如果您只是在溢出时包装内容，您认为使用
nowrap
有什么意义吗？请更清楚地解释您的问题，因为在当前的表格中，它描述得非常糟糕，而且是一篇低质量的文章。
th
的
最大宽度
。我希望
th
单元格的行为类似于
nowrap
，直到它们达到
120的宽度为止，我希望在这一点上对它们进行包装。也许直到现在我才完全理解这个问题，但当我们删除th选择器的“空白：nowrap”时，我看到了预期的行为（据我所知）。th单元格根据文本的数量展开，直到达到120px宽度。然后文本开始换行，宽度为120px。我在这里误解了什么？1）你说的是哪个
max width
<代码>600
或
120
。2） 如果
max width
是
600
，那么如果您只是在溢出时包装内容，您认为使用
nowrap
有什么意义吗？请更清楚地解释您的问题，因为在当前的表格中，它描述得非常糟糕，而且是一篇低质量的文章。
th
的
最大宽度
。我希望
th
单元格的行为类似于
nowrap
，直到它们达到
120的宽度为止，我希望在这一点上对它们进行包装。也许直到现在我才完全理解这个问题，但当我们删除th选择器的“空白：nowrap”时，我看到了预期的行为（据我所知）。th单元格根据文本的数量展开，直到达到120px宽度。然后文本开始换行，宽度为120px。我在这里误解了什么？也许CSS标准的升级可以添加一些类似
空白：nowrap（最大宽度：400）
您必须在样式中添加
宽度：120px
，但是是的，这是一个JS解决方案。@Dan javascript不是有效的解决方案吗？也许升级到CSS标准可以添加类似
空白：nowrap（最大宽度：400）的内容
您必须在样式中添加
宽度：120px
，但是是的，这是一个JS解决方案。@Dan javascript不是有效的解决方案吗？
<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>

white-space: nowrap;