web-dev-qa-db-ja.com

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

長い文字列（DNAシーケンス）があります。空白文字は含まれていません。

例えば：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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

htmlcssstringxulword-wrap
178
Pierre

ブロック要素の場合：

<textarea style="width:100px; Word-wrap:break-Word;">
  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>

インライン要素の場合：

<span style="width:100px; Word-wrap:break-Word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>
254
heeen

ブレークを許可するポイントに 幅がゼロのスペース を配置します。ゼロ幅のスペースは、HTMLでは&#8203;です。例えば：

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;GATGATGC

102
Remy Blank

非常に役立つ回答を次に示します。

長い単語が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;
36
emik

私にとってこれは機能します、

<td width="170px" style="Word-wrap:break-Word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

tdの代わりに、別のdiv内でdivを使用することもできます。 OperaブラウザーとIEブラウザーの両方にすべてのテキストを表示するため、overflow:autoを使用しました。

18
Rani

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

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

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

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

12
Peter Hilton

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

参照： ラッピングコンテンツ

11
Graeck

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/ そこにいくつかの追加調査があります。

8
Ben

Word-wrap:break-Word;が機能するためには、displayがblockに設定されていること、および要素に幅が設定されていることを確認する必要がありました。 Safariでは、pタグを使用し、widthをexに設定する必要がありました。

5
innerurge
<textarea style="width:100px; Word-wrap:break-Word;">
  place your text here
</textarea>
3
user5217984

PHPを使用している場合、wordwrap関数はこれに対してうまく機能します。 http://php.net/manual/en/function.wordwrap.php

CSSソリューションWord-wrap: break-Word;は、すべてのブラウザーで一貫しているとは限りません。

他のサーバー側言語にも同様の機能があります-または、手動で作成できます。

PHP wordwrap関数の仕組みは次のとおりです。

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

これにより、50文字で<br>タグで文字列がラップされます。 「true」パラメータは、文字列を強制的に切り取ります。

3
Dave

テーブルのサイズが固定されていない場合、以下の行が機能しました：

style="width:110px; Word-break: break-all;"
2
rakpan

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

width:100%;
float:left;
1
TechBrush.Org

<wbr> tagを使用：

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

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

1
warvariuc