CSS:我如何强制一个长string(没有任何空白)被包装在XUL和/或HTML

我有一个长串(一个DNA序列)。 它不包含任何空格字符。 例如:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA 

什么是CSSselect器强制这个文本被包装在一个HTML:textarea或在一个xul:文本框

块元素

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

内联元素

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

将零宽度空格放置在要允许中断的点上。 零宽度空间是&#8203; 在HTML中。 例如:

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;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而不是td使用div。 我使用了overflow:auto ,因为它显示了我的Opera和IE浏览器中的所有文本。

我不认为你可以用CSS做到这一点。 相反,在string的“字长”处插入一个HTML软连字符:

 ACTGATCG&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;TGACGATG 

这将在行的末尾显示一个连字符,它可能包含或不包含您想要的内容。

注意Safari浏览器似乎将长string包装在<textarea> ,不像Firefox。

使用CSS方法强制包装一个没有空格的string。 三种方法:

1)使用CSS空白属性。 为了涵盖浏览器的不一致性,你必须用几种方法来声明它。 所以,只要把你的looooongstring放到一些块级别的元素(例如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的强制转换混合 。

3)我只是考虑到这一点,我认为也可以工作(但我需要更全面地testing浏览器的支持):

 .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; 

在这里find: http : //kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/与一些额外的研究,在那里find。

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

如果您使用的是PHP,那么wordwrap函数对此很有效: http : //php.net/manual/en/function.wordwrap.php

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

其他服务器端语言具有相似的function,或者可以手工构build。

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

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

这个string包含了50个字符的<br>标签。 'true'参数强制string被剪切。

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

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

 width:100%; float:left; 

在表格不是固定大小的情况下,下面的线条对我有用:

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

使用<wbr>标签:

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

我觉得这比使用零宽度空间更好&#8203; 这可能会导致您复制文本时出现问题。

$ string =“ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA”;

$ wrappedstring = html_entity_decode(wordwrap($ string,50,“<br>”,true)); 这是正确的代码