空白なしで長い文字列を強制的にラップするにはどうすればよいですか？
長い文字列（DNAシーケンス）があります。空白文字は含まれていません。
例えば：
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA
このテキストをhtml:textareaまたはxul:textboxにラップさせるCSSセレクターは何ですか？
ブロック要素の場合：
<textarea style="width:100px; Word-wrap:break-Word;">
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>インライン要素の場合：
<span style="width:100px; Word-wrap:break-Word; display:inline-block;">
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>ブレークを許可するポイントに 幅がゼロのスペース を配置します。ゼロ幅のスペースは、HTMLでは​です。例えば：
ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC
非常に役立つ回答を次に示します。
時間を節約するために、これは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>
tdの代わりに、別のdiv内でdivを使用することもできます。 OperaブラウザーとIEブラウザーの両方にすべてのテキストを表示するため、overflow:autoを使用しました。
CSSでこれができるとは思わない。代わりに、文字列に沿った通常の「単語の長さ」で、HTMLソフトハイフンを挿入します。
ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG
これにより、行の最後にハイフンが表示され、折り返されて、必要な場合とそうでない場合があります。
注Safariは、Firefoxとは異なり、<textarea>で長い文字列をラップしているようです。
CSSメソッドを使用して、空白を含まない文字列を強制的にラップします。 3つの方法：
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;
}
参照： ラッピングコンテンツ
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/ そこにいくつかの追加調査があります。
Word-wrap:break-Word;が機能するためには、displayがblockに設定されていること、および要素に幅が設定されていることを確認する必要がありました。 Safariでは、pタグを使用し、widthをexに設定する必要がありました。
<textarea style="width:100px; Word-wrap:break-Word;">
place your text here
</textarea>
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);
これにより、50文字で<br>タグで文字列がラップされます。 「true」パラメータは、文字列を強制的に切り取ります。
テーブルのサイズが固定されていない場合、以下の行が機能しました：
style="width:110px; Word-break: break-all;"
widthを設定してfloatを追加するだけでうまくいきました:-)
width:100%;
float:left;
<wbr> tagを使用：
ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC
これは、テキストをコピーするときに問題を引き起こす可能性があるゼロ幅のスペース​を使用するよりも良いと思います。