如何强制一个没有任何空白的长字符串？

Question

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

例如：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

什么是CSS选择器强制将这个文本包装在html:textarea或xul:textbox中？

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>

Answer 2

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

Answer 3

在桌子不是固定尺寸的情况下，下面的线为我工作：

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

Answer 4

只是设置width并添加float为我工作:-)

width:100%;
float:left;

Answer 5

使用<wbr>tag：

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

我认为这比使用零宽度空间​更好，这可能会在复制文本时导致问题。

Answer 6

$ string =“ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA”;

$ wrappedstring = html_entity_decode（wordwrap（$ string，50，“<br>”，true））;这是正确的代码

Answer 7

将zero-width spaces放在您想要休息的地方。零宽度空间是HTML中的​。例如：

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Answer 8

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

How to prevent long words from breaking my 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;

Answer 9

对我来说这很有效，

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

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

Answer 10

我不认为你可以用CSS做到这一点。相反，沿着字符串的常规“字长”，插入一个HTML软连字符：

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

这将在行的末尾显示一个连字符，它包含在哪里，这可能是你想要的，也可能不是你想要的。

注意Safari似乎将长字符串包装在<textarea>中，与Firefox不同。

Answer 11

使用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）使用force-wrap mixin from Compass。

3）我也正在研究这个问题，我认为也可能有用（但我需要更完整地测试浏览器支持）：

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

参考：wrapping content

Answer 12

我的方式（当没有适当的方法来插入特殊字符）通过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/还有一些额外的研究。

Answer 13

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

Answer 14

如果您正在使用PHP，那么wordwrap函数适用于此：http://php.net/manual/en/function.wordwrap.php

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

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

以下是PHP wordwrap函数的工作原理：

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

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