如何将文本包装在`td`中答案

【问题标题】：How to wrap the text in a `td`如何将文本包装在`td`中
【发布时间】：2020-09-24 12:41:54
【问题描述】：

我有一个简单的酒窝table

&lt;table&gt;&lt;tr&gt;&lt;td&gt;112124 12452123 12 545212415  5415451 54154 1545154545 5414956472 546461646456 112124 12452123 12 545212415  5415451 54154 1545154545 5414956472 546461646456  112124  12452123 12 545212415  5415451 54154 1545154545 5414956472 99999 112124 12452123 12 545212415  5415451 54154 1545154545 5414956472 546461646456 112124 12452123 12 545212415  5415451 54154 1545154545 5414956472 546461646456 112124 12452123 12 545212415  5415451 54154 1545154545 5414956472 546461646456 &lt;/td&gt;&lt;td style="font-size:80px"&gt;A A A A A A A A A A A&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

如您所见，右侧栏非常高，而左侧栏有大量空白。

我怎样才能让左边的td 换行更智能，所以它使用更多的行，而右边的“A”将有更多的水平空间。好像我会在左侧添加style="width:60%" `td'？

当然，我不能手动添加百分比。因为它是每个内容的动态。我只想修复包装/流程

附言。我尝试添加table-layout:fixed 和white-space 的不同选项，但同时无济于事

谢谢！

【问题讨论】：

我需要他们并排。没关系。但是为什么左 td 拉伸这么多？为什么不让正确的 td 获得更多空间。通常表格会自动调整，因此列的高度大致相同。没有太多多余的空间

标签： html css html-table

【解决方案1】：

在表格中使用table-layout:fixed，在td 中使用word-wrap:break-word

td {

    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

而表属性为：

table { 
  table-layout: fixed;
  width: 100%
}

每次我提交时它都会拉伸。此页面也在 div 中。是否还需要设置 div 和 table 的宽度？

【讨论】：

谢谢！工作完美！实际上 td 样式并不重要。我们只需要表中的 2 种样式。谢谢！
@YisroelM.Olewski -- 这个答案与将td 设置为width: 50% 相同，根据您的问题，这不是您想要的。如果你删除所有A，但只有一个，你会明白我的意思
@YisroelM.Olewski -- 正如我在主要 cmets 中所述，您需要一个脚本来计算适当的百分比。
我看到你对这个答案的反应：stackoverflow.com/a/62741200/8620333（并且可能赞成）。我只是想警告你这是一个抄袭的答案，所以最好不要鼓励这样的答案。相反，我们应该对其投反对票并将其标记为版主。谢谢
对不起，我不知道你为什么不举报