CSS:如何强制将长字符串(没有任何空白)强制包装在XUL和/或HTML中

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

在要允许断点的点处放置零宽度空格.零宽度空间是​HTML格式.例如:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

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;

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浏览器中的所有文本.

Answer 5

我不认为你可以用CSS做到这一点.相反,沿着字符串的常规"字长",插入一个HTML软连字符:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

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

注意Safari似乎<textarea>无论如何都要包装长字符串,这与Firefox不同.

Answer 6

使用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;
}

参考:包装内容

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/ ,还有一些额外的研究.

Answer 8

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