如何分解带有空格的文本，但如果文本太长？

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;
}

上面的解决方案使用空白来分解第二个字符串，并将其限制在使字符串看起来可读的列宽。

然而，上面的代码片段也没有分解上面的长字符串。

我使用了word-break: break-all;，这也很好（因为第一个字符串被分解，不会进入其他列），但使用第二个字符串，它会像下面这样分解（我不想要）：

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

This is a long first name wit
h

所以h挂断了，但我更喜欢在第二行使用with。

所以，我想知道我该如何处理这两个问题？

Answer 1

使用word-wrap: break-word;:

来自MDN的文档

断字
表示如果行中没有其他可接受的断点，则通常不可破解的单词可能会在任意点处断开。

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>

Answer 2

我想你要找的是word-wrap: break-word;

示例

Answer 3

您需要使用break-word:

word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;

连字符是回退。

如果你想把每一个字母都分成一行，而不是按单词，你可以使用word-break:break-all;。

示例

灵感来自CSS技巧

Answer 4

我最近在自己的开发中遇到了这个问题，无法找到一个与网站需要支持的浏览器一致工作的CSS解决方案。其他答案建议使用word-break: break-word，它在一些现代浏览器中运行良好，但有些浏览器对此的解释与word-break: break-all相同。

我推测您正在使用服务器端代码来创建表。一种适应旧浏览器的方法是通过插入零宽度空间（&#8203；）来分解长单词，为那些旧浏览器提供长单词可以分解的线索。当收到文本时，我的代码会找到超过20个字符的单词，并将单词分成20个字符部分，空格为零。