空白のない長い文字列を強制的にラップするにはどうすればよいですか？

長い紐（DNA配列）を持っています。空白文字は含まれていません。

例えば：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

このテキストをa html:textareaまたはaでラップするように強制するCSSセレクターは何xul:textboxですか？

ブロック要素の場合：

<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

ここにいくつかの非常に役立つ答えがあります：

長い単語が私の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内でdivを使用することもできtdます。overflow:autoOperaとIEブラウザーの両方ですべてのテキストが表示されるため、私はを使用しました。

CSSでこれを行うことはできないと思います。代わりに、文字列に沿った通常の「単語の長さ」で、HTMLソフトハイフンを挿入します。

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

これにより、行の終わりで折り返されるハイフンが表示されます。これは必要な場合とそうでない場合があります。

注<textarea>Firefoxとは異なり、Safariは長い文字列をとにかくラップしているようです。

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。

PHPを使用している場合、wordwrap関数はこれに適しています。 //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'パラメータは文字列を強制的にカットします。

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

<wbr>タグを使用：

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

これは​、テキストをコピーするときに問題を引き起こす可能性があるゼロ幅のスペースを使用するよりも優れていると思います。

テーブルが固定サイズでない場合、下の行が私のために働きました：

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

設定widthして追加するだけでfloatうまくいきました:-)

width:100%;
float:left;