CSS 分词和自动换行不起作用

Question

我可以寻求帮助吗？ Word Wrap 或 Word break 不适用于我的字符串，

这是正文， 该公司的收入在过去五年中一直在增长，2015 年至 2019 年期间整体增长 49%。截至 2019 年 12 月 29 日止年度的收入增长 7% 至 4.264 亿美元，而截至 12 月 30 日止年度为 3.982 亿美元, 2018 年。增长的主要原因是截至 2018 年 12 月 30 日止年度期间和之后开设的新餐厅增加了 359 个营业周，增加了 2850 万美元的收入，以及可比餐厅销售额的增加。与 2018 年同期的 550 万美元相比，截至 2019 年 12 月 29 日止年度的净收入增加了 70 万美元和 12%，达到 620 万美元。这是由于折旧和摊销成本增加，以及所得税优惠。 2019年末公司现金等价物总额为1010万美元，比上年增加200万美元。经营活动产生了 4340 万美元，而投资活动使用了 3330 万美元。融资活动另外使用了 830 万美元，主要用于普通股回购和信贷额度支付。

这是我的 CSS

.txt {
  word-break: break-all;
  word-wrap: break-word;
  min-height:150px;
  max-width:150px;
  overflow-x: auto;
}

这是我的 HTML

<td>
   <div class="txt">{{ $value }}</div>
</td>

会发生什么

字符串不会中断，它显示在一行中，即使溢出是否隐藏，

Answer 1

它似乎工作正常：

.txt {
  word-break: break-all;
  word-wrap: break-word;
  min-height:150px;
  max-width:150px;
  overflow-x: auto;
}

<div class="txt">
The company's revenue has been increasing for the last five years with an overall growth of 49% between 2015 and 2019. Revenue increased 7% to $426.4 million for the year ended December 29, 2019, as compared to $398.2 million for the year ended December 30, 2018. The increase was primarily driven by $28.5 million in incremental revenue from an additional 359 operating weeks provided by new restaurants opened during and subsequent to the year ended December 30, 2018 as well as an increase in its comparable restaurant sales. Net income increased by $0.7 million and 12% to $6.2 million for the year ended December 29, 2019 as compared to $5.5 million during the comparable period in 2018. This was due to the increase in depreciation and amortization costs, as well as the increase in income tax benefits. The company's cash equivalents at the end of 2019 totaled $10.1 million, an increase of $2 million from the previous year. Operating activities generated $43.4 million, while investing activities used $33.3 million. Financing activities used another $8.3 million primarily for common stock repurchases and line of credit payments.
</div>

您是否“检查”了您的 div 以查看是否有其他 css 规则弄乱了这件事？

当您在浏览器中点击 F12 并通过单击（1 或 2）选择您的 div 时，您将看到在 3 中应用了哪些样式。
您可能会看到 word-break: break-all; 或与 word-wrap 相同的内容，因为它已被其他规则覆盖。

Answer 2

你可以这样做而不是将 div 嵌套到 td 中

.txt {
  word-break: break-all;
  word-wrap: break-word;
  min-height:150px;
  max-width:150px;
}

<table>
  <tr>
    <td class="txt">skdjfhskadjfhsdlkajfhdsakljfhsdakjfhslkadjfhsdalkjfhsadlkjfhsdalkjfhsadlkjfhsdakljfhsdalkjfhsadlkjfhsdalkjfhsladkjfhslakjfhlskadjfh</td>
   <tr>
</table>