javascript - 如果文本太长，如何用空格分隔文本？

Question

所以我觉得我有点进退两难。

我有一个具有固定宽度列但没有固定宽度行的网格。

所以，我有一个像这样的场景

Column1, row 1: 
ThisisalongtextstringthatdoesnotcontainspacesthatIneedtobreakup

Column2, row2:
This is a long text string that has whitespace and I would like to cut based on whitespace between words.

这是我尝试让这些字符串在我的网格中看起来不错:

.k-grid td {
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    padding: 0.4em 0.6em;
    vertical-align: middle;
    white-space: normal;
    word-break: keep-all;
}

上述解决方案使用空格分解第二个字符串并将其限制为列宽，这使得字符串看起来可读。

但是上面的代码片段也没有分解上面的长字符串。

我使用了 using word-break:break-all; 这也很棒(因为第一个字符串被分解并且不会进入其他列)但是对于第二个字符串，它分手就像下面这样的词(我不想要):

Break-all 对空白单词执行此操作:

This is a long first name wit
h

这样 h 就挂掉了，但我更喜欢在第二行有 with 。

所以，我想知道如何解决这两个问题？

Answer 1

使用自动换行:break-word;:

From MDN's docs

break-word
Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

div {
  width: 100px;
  padding: 10px;
  outline: 1px solid silver;
  word-wrap: break-word;
}

<div>
  ThisisalongtextstringthatdoesnotcontainspacesthatIneedtobreakup
</div>
<div>
  This is a long text string that has whitespace and I would like to cut based on whitespace between words.
</div>