213

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

例えば：

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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

4

16 に答える 16

303

ブロック要素の場合:

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

インライン要素の場合:

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

于 2009-01-31T16:53:49.427 に答える
111

休憩を許可するポイントにゼロ幅スペースを配置します。ゼロ幅スペースは&#8203;HTML形式です。例えば：

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

于 2009-04-18T19:33:22.003 に答える
20

私にとってこれはうまくいきます、

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

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

于 2010-07-13T04:52:09.773 に答える
12

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

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

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

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

于 2009-01-31T17:08:23.517 に答える
12

CSS メソッドを使用して、空白のない文字列を強制的にラップします。3 つの方法:

1) CSS の空白プロパティを使用します。ブラウザの不一致をカバーするには、いくつかの方法で宣言する必要があります。したがって、長い文字列をブロック レベルの要素 (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;
}

参考：ラッピング内容

于 2013-02-14T01:13:14.200 に答える
8

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

于 2014-09-16T13:35:59.383 に答える
5

word-wrap:break-word;私のために働くためには、displayが に設定されblock、幅が要素に設定されていることを確認する必要がありました。Safari では、pタグwidthが必要で、 で設定する必要がありましたex。

于 2010-12-07T20:09:20.933 に答える
3 
<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>
于 2015-08-12T06:50:21.543 に答える
3

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

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

于 2011-01-04T11:25:33.397 に答える
2

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

style="width:110px; word-break: break-all;"
于 2016-10-31T17:10:35.107 に答える