我如何强制长字符串没有任何空白被包裹？

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

例如：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

什么是CSS选择器来强制将此文本用a html:textarea或a xul:textbox换行？

对于块元素：

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

对于内联元素：

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

在您要允许中断的点处放置零宽度的空格。零宽度空格​位于HTML中。例如：

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

以下是一些非常有用的答案：

如何防止长词破坏我的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;

对我来说，这有效

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

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

我认为您无法使用CSS做到这一点。而是在字符串的常规“字长”处插入HTML软连字符：

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

这将在换行的末尾显示连字符，这可能是您想要的，也可能不是您想要的。

注意Safari似乎<textarea>无论如何都将长字符串包装起来，这与Firefox不同。

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

1）使用CSS空白属性。为了解决浏览器不一致的问题，您必须用几种方法声明它。因此，只需将您的looooong字符串放入某个块级元素（例如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的强制包装mixin。

3）我也只是在研究这一点，我认为也可能有效（但我需要更全面地测试浏览器支持）：

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

参考：包装内容

我通过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/， 并在此处找到其他一些研究。

为了word-wrap:break-word;为我工作，我必须确保将display设置为block，并且在元素上设置了宽度。在Safari中，它必须具有p标签，并且width必须在中设置ex。

如果您使用的是PHP，则wordwrap函数可以很好地实现此目的：http : //php.net/manual/en/function.wordwrap.php

CSS解决方案word-wrap: break-word;似乎并非在所有浏览器中都一致。

其他服务器端语言具有类似的功能-或可以手动构建。

这是PHP自动换行功能的工作方式：

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"<br>",true);

这会使用<br>标签将字符串包装为50个字符。'true'参数强制剪切字符串。

<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

使用<wbr>标签：

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

我认为这比使用零宽度的空格更好，因为零宽度的空格​可能会在您复制文本时引起问题。

在表格不是固定大小的情况下，下面的行对我有用：

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

只是设置width和添加float对我有用:-)

width:100%;
float:left;