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>
将零宽度空格放置在要允许中断的点上。 零宽度空间是​ 在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而不是td使用div。 我使用了overflow:auto ，因为它显示了我的Opera和IE浏览器中的所有文本。
我不认为你可以用CSS做到这一点。 相反，在string的“字长”处插入一个HTML软连字符：
ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­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,"<br>",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
我觉得这比使用零宽度空间更好​ 这可能会导致您复制文本时出现问题。
$ string =“ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA”;
$ wrappedstring = html_entity_decode（wordwrap（$ string，50，“<br>”，true））; 这是正确的代码
