在将文本全部放入另一列之前，如何更喜欢将文本换行？

Posted 2023-03-05

【中文标题】在将文本全部放入另一列之前，如何更喜欢将文本换行？

【英文标题】：How to prefer to wrap text in one column before break-all in another?

【发布时间】：2019-02-02 15:18:44

【问题描述】：

最后，我想我找到了一个以前没人问过的问题。我有一个有两列的表。第一列有时可能有一个非常非常长的词。第二列总是有很多简短的单词，它们包裹得很好。如果我将 word-break:break-all 应用于第一列，然后缩小我的浏览器窗口，当我希望在进行丑陋的 break-all 换行之前将所有短词包装在第二列中时，这些列将保持 50/50第一列。

<table>
  <tr>
    <td style="word-break:break-all;">reallyreallyreallyreallylongword</td>
    <td>Here are a lot of short words that wrap nicely</td>
  </tr>
</table>

我需要在所有列中包装所有可能的可换行字，然后再诉诸丑陋的全部，但仍将其作为防止溢出的最后手段。哪些列最终变宽并不重要。

【问题讨论】：

您的措辞有点混乱，先生！所有单词都已经被表格、表格行和 td 包裹在列中，所以我不确定你的意思。对于这些列，您是否试图始终使长词尽可能宽，以尽可能长时间地防止断词？ [我假设这与响应式设计有关？

没错。

我想优先考虑使用可换行文本缩小单元格，然后在另一个单元格中强制中断长字。

好吧，我想我明白了。看我的回答

【参考方案1】：

因此，如果您为两列指定百分比宽度，其中一列大于另一列，则较大的列将需要更长的时间才能开始缩小文本。

EG：

    <table>
      <tr>
         <td class="widecolumn">reallyreallyreallyreallylongword</td>
         <td class="smallcolumn">Here are a lot of short words that wrap nicely</td>
      </tr>
    </table>

    table 
      max-width:1000px;
      width:100%;
    

    td 
      word-break:break-all;
    
    td.widecolumn 
      width:65%;  
    
    td.smallcolumn 
      width:35%;
    

工作示例：https://codepen.io/FEARtheMoose/pen/XPKPNZ