Herhangi bir boşluk bırakmadan uzun bir dizeyi nasıl zorlayabilirim?

Uzun bir dizem (DNA dizisi) var. Herhangi bir boşluk karakteri içermez.

Örneğin:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Bu metni bir html:textareaveya içine sarılmaya zorlayan CSS seçici nedir xul:textbox?

blok elemanları için:

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

satır içi elemanlar için:

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

Aralara izin vermek istediğiniz noktalara sıfır genişliğinde boşluklar yerleştirin. Sıfır genişlik alanı ​HTML biçimindedir. Örneğin:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

İşte bazı çok faydalı cevaplar:

Uzun kelimelerin div'ımı kırmasını nasıl önleyebilirim?

size zaman kazanmak için, bu css ile çözülebilir:

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;

Benim için bu işe yarıyor,

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

Bunun yerine başka bir div içinde div de kullanabilirsiniz td. overflow:autoOpera ve IE tarayıcılarımdaki tüm metni gösterdiği için kullandım .

Bunu CSS ile yapabileceğinizi sanmıyorum. Bunun yerine, dize boyunca normal 'kelime uzunluklarında' bir HTML yumuşak tire ekleyin:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Bu, satırın sonunda, sarıldığı, istediğiniz veya olmayabileceğiniz bir kısa çizgi görüntüler.

Not Safari <textarea>, Firefox'un aksine uzun dizeyi yine de sarmış gibi görünüyor .

Boşluğu olmayan bir dizeyi sarmaya zorlamak için bir CSS yöntemi kullanın. Üç yöntem:

1) CSS boşluk özelliğini kullanın. Tarayıcı tutarsızlıklarını kapsamak için, bunu birkaç yolla bildirmeniz gerekir. Bu nedenle, looooong dizenizi bazı blok düzeyi öğelerine (ör. Div, pre, p) koyun ve o öğeye aşağıdaki css'yi verin:

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'tan kuvvet sarma karışımını kullanın .

3) Ben de buna bakıyordum ve bence de işe yarayabilir (ancak tarayıcı desteğini daha eksiksiz test etmem gerekiyor):

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

Referans: içeriği kaydırma

CSS ile gitmek için yolum (özel karakter eklemek için uygun bir yol olmadığında):

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Burada olduğu gibi: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ orada bulunacak bazı ek araştırmalarla.

İçin word-wrap:break-word;benim için işe, ben emin olmak zorunda displayolarak ayarlandı blockve genişlik elemanı üzerinde ayarlandığını. Safari'de bir petikete sahip olması ve widthayarlanması gerekiyordu ex.

PHP kullanıyorsanız, wordwrap işlevi bunun için iyi çalışır: http://php.net/manual/en/function.wordwrap.php

CSS çözümü word-wrap: break-word; tüm tarayıcılarda tutarlı görünmüyor.

Diğer sunucu tarafı diller de benzer işlevlere sahiptir - veya elle oluşturulabilir.

PHP wordwrap işlevi şu şekilde çalışır:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"<br>",true);

Bu, dizeyi <br> karakteriyle 50 karaktere sarar. 'True' parametresi dizeyi kesilmeye zorlar.

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

<wbr>Etiketi kullan :

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

Bunun ​, metni kopyalarken sorunlara neden olabilecek sıfır genişlikli alanı kullanmaktan daha iyi olduğunu düşünüyorum .

Masanın sabit boyutta olmadığı bir durumda, aşağıdaki satır benim için çalıştı:

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

sadece ayarlama widthve ekleme floatbenim için çalıştı :-)

width:100%;
float:left;