如何强制将没有空格的长字符串进行换行？

Question

我有一个长字符串（代表DNA序列），它不含任何空格字符。

例如：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

如何编写CSS选择器，使得文本被包装在html:textarea或xul:textbox中？

- Pierre

---

具有讽刺意味的是，在 Stack Overflow 上这个字符串也没有断开... - splattne

Answer 1

对于块级元素：

<textarea style="width:100px; word-wrap:break-word;">
  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>

对于行内元素：

<span style="width:100px; word-wrap:break-word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>

- heeen

---

它只支持IE，Safari和FF3.1（alpha）。 - Adam Bellaire

这仅适用于新一代浏览器 - 请参见http://caniuse.com/#search=word-break。 - Michal Bernhard

@Michael：这个答案使用的是“word-wrap”规则，而不是“word-break”规则；前者在今天使用的几乎所有浏览器中都得到了支持。在“部分支持”的情况下，似乎“word-wrap”规则的“break-word”值仍然是可行的。 - Robusto

在标准中，该属性已更名为overflow-wrap，但word-wrap已得到广泛实现。 - Ciro Santilli OurBigBook.com

我需要 overflow-wrap: 'anywhere'。 - cyclingLinguist

Answer 2

在希望允许换行的位置插入零宽度空格。 HTML中的零宽度空格是​。例如：

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

- Remy Blank

---

感谢您提供的解决方案。我在表格内尝试了很多方法，但只有这个解决方案可以在IE、Firefox和Chrome中正常工作。 - Farinha

+1，这样做更好，因为它涵盖了更多的情况，即使问题是针对一个更特定的情况。 - montrealist

你也可以使用<wbr>标签，它具有提供可选换行机会的相同目的。 - justisb

注意，如果你在可能被复制粘贴的事情中这样做。 - alex

正则表达式中的 \s（空白字符）不匹配零宽度空格。如果您想要移除它们，需要显式地编写 /\u200B/g 或类似的代码。请参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes。 - Neal Ehardt

Answer 3

这里有一些非常有用的答案：

如何防止长单词打破我的div？

为了节省时间，这可以通过css解决：

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;

- emik

---

因为提到了“word-break: break-all;”且在IE9中对我有效，所以我点赞。 - Nick Benedict

在Android WebView中，word-break: break-all;是我唯一一个有效的选择。 - Stan

感谢您使用 word-break: break-all;！ - Lonnie Best

今天我学到了一个新的前缀：-hp-！ - i336_

似乎word-wrap的break-word值已经弃用。相反，您可以使用overflow-wrap: anywhere或overflow-wrap: break-word。 - djvg

Answer 4

对我来说，这个有效。

<td width="170px" style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

您也可以在一个 div 内使用另一个 div，而不是 td。我使用了 overflow:auto，因为它可以在我的 Opera 和 IE 浏览器中都显示所有文本。

- Rani

---

这对我没有起作用。我不得不将“word-wrap”属性移动到div中并删除“overflow”属性。通过这些更改，它可以正常工作。 - danigonlinea

Answer 5

我认为你无法使用CSS来实现这个功能。相反，在字符串中的常规“单词长度”处插入HTML软连字符：

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

这将在文本末尾显示连字符，作为换行时的一部分，这可能是您想要的，也可能不是。

请注意，Safari似乎无论如何都会在<textarea>中换行长字符串，而Firefox则不会。

- Peter Hilton

---

哇，我甚至不知道那个。很棒！ - Daniel Schaffer

我也不知道那个。太棒了！ - Karl

Answer 6

使用CSS方法强制换行没有空格的字符串。有三种方法：

1）使用CSS white-space属性。为了覆盖浏览器不一致性，您必须声明多种方式。因此，只需将您的长字符串放入某些块级元素（例如div、pre、p）中，并为该元素提供以下CSS：

some_block_level_tag {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

2）使用Compass的force-wrap mixin。

3）我也在研究这个问题，我认为这个方法可能也可以（但是我需要更全面地测试浏览器支持）：

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

参考文献：包装内容

- Graeck

---

是的，#3在所有现代浏览器甚至旧版IE6+中都可以使用。 - Graeck

仅当有机会按单词拆分时，#3才有效。过长的字符串不会被拆分（在Chrome 52.0.2743.82上进行了测试）。 - collapsar

Answer 7

当没有适当的方法插入特殊字符时，我使用 CSS 作为我的解决方法：

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

在这里找到： http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ 并可以在那里找到一些额外的研究。

该链接提供了有关使用CSS实现单词换行和连字符的详细信息，以便优化文本的阅读体验。

- Ben

Answer 8

在我使用 word-wrap:break-word; 时，我必须确保元素的 display 属性设置为 block，并且宽度已经被设定。在Safari浏览器中，它必须有一个 p 标签，并且宽度必须以 ex 单位设定。

- innerurge

Answer 9

使用 <wbr> 标签：

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

我认为这比使用零宽度空格​更好，因为当你复制文本时可能会出现问题。

- warvariuc

Answer 10

在表格大小不固定的情况下，以下代码对我有效：

```html

在表格大小不固定的情况下，以下代码对我有效：

```

style="width:110px; word-break: break-all;"

- rakpan