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挂了但是我更喜欢在第二行使用。

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

Answer 1

使用word-wrap: break-word;：

From MDN's docs

<强>打破字
表示如果行中没有其他可接受的断点，通常不可破坏的单词可能会在任意点被破坏。

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;

Example

Answer 3

您需要使用break-word：

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

连字符是后备。

如果您希望将每个字母分成新行而不是单词，则可以使用word-break:break-all;。

Example

受CSS Tricks启发

Answer 4

我最近在自己的开发中遇到了这个问题，无法找到与该网站需要支持的浏览器一致的CSS解决方案。其他答案建议使用word-break: break-word，这在某些现代浏览器中效果很好，但有些浏览器会将其解释为与word-break: break-all相同。

我假设您正在使用服务器端代码来创建表。容纳旧版浏览器的一种方法是通过插入零宽度空间（＆amp;＃8203;）来分解长字，为那些旧版浏览器提供线索可以打破长字的线索。收到文本后，我的代码会找到超过20个字符的单词，并将该单词分成20个字符的零宽度空间。

如何用空格分解文本，但是如果它太长了？

4 个答案: