1

我可以寻求帮助吗，Word Wrap 或 Word break 无法处理我的字符串，

这是文本，该公司的收入在过去五年中一直在增长，2015 年至 2019 年期间整体增长 49%。截至 2019 年 12 月 29 日的年度收入增长 7% 至 4.264 亿美元，而去年同期为 3.982 亿美元截至 2018 年 12 月 30 日止年度。增长的主要原因是截至 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>

发生的事情是

在此处输入图像描述

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

4

2 回答 2

2

它似乎工作正常：

.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在浏览器中点击，然后div通过单击它（1 或 2）来选择您的其中一个时，您会看到在 3 中应用了哪些样式。
您可能会看到word-break: break-all;或相同，word-wrap因为它被其他一些东西覆盖了规则。

于 2020-12-17T07:57:15.593 回答
1

你可以这样做而不是将 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>

于 2020-12-17T08:02:12.010 回答