我有一长串(DNA序列)。它不包含任何空白字符。

例如:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

什么是CSS选择器,迫使这个文本被包装在html:textarea或在xul:文本框?


当前回答

使用超级>标签:

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

我认为这比使用零宽度空间更好&#8203;这可能会导致问题,当你复制文本。

其他回答

使用超级>标签:

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

我认为这比使用零宽度空间更好&#8203;这可能会导致问题,当你复制文本。

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

如何防止长词打破我的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浏览器中的所有文本。

如果你使用的是PHP,那么wordwrap函数可以很好地工作: http://php.net/manual/en/function.wordwrap.php

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

其他服务器端语言也有类似的功能——或者可以手工构建。

下面是PHP wordwrap函数的工作原理:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"&lt;br&gt;",true);

使用<br>标记将字符串包装为50个字符。'true'参数强制字符串被切断。

使用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中的force-wrap mixin。

3)我也在研究这个问题,我认为可能也有用(但我需要更全面地测试浏览器支持):

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

参考资料:包装内容