Bagaimana saya bisa memaksa tali panjang tanpa ada yang kosong untuk dibungkus?

Saya memiliki string panjang (urutan DNA). Itu tidak mengandung karakter spasi putih.

Sebagai contoh:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Apa yang akan menjadi pemilih CSS untuk memaksa teks ini untuk dibungkus dengan html:textareaatau dalam xul:textbox?

untuk elemen blok:

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

untuk elemen sebaris:

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

Tempatkan spasi nol lebar pada titik di mana Anda ingin istirahat. Ruang nol-lebar adalah ​dalam HTML. Sebagai contoh:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Inilah beberapa jawaban yang sangat berguna:

Bagaimana mencegah kata-kata panjang dari melanggar div saya?

untuk menghemat waktu Anda, ini dapat diselesaikan dengan 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;

Bagi saya ini bekerja,

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

Anda juga bisa menggunakan div di dalam div lain td. Saya menggunakan overflow:auto, karena menampilkan semua teks di browser Opera dan IE saya.

Saya tidak berpikir Anda bisa melakukan ini dengan CSS. Alih-alih, secara teratur 'panjang kata' di sepanjang string, masukkan tanda hubung lunak HTML:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Ini akan menampilkan tanda hubung di akhir baris, di mana ia membungkus, yang mungkin atau mungkin tidak seperti yang Anda inginkan.

Catatan Safari tampaknya membungkus string panjang dengan cara apa pun <textarea>, tidak seperti Firefox.

Gunakan metode CSS untuk memaksa membungkus string yang tidak memiliki spasi putih. Tiga metode:

1) Gunakan properti white-space CSS. Untuk menutupi ketidakkonsistenan browser, Anda harus mendeklarasikannya dengan beberapa cara. Jadi cukup masukkan string looooong Anda ke beberapa elemen level blok (misalnya, div, pre, p) dan berikan elemen itu css berikut:

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) gunakan force-wrap mixin dari Compass .

3) Saya hanya melihat ini juga dan saya pikir mungkin juga berfungsi (tapi saya perlu menguji dukungan browser lebih lengkap):

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

Referensi: membungkus konten

Cara saya untuk pergi (ketika tidak ada cara yang tepat untuk memasukkan karakter khusus) melalui 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;

Seperti yang ditemukan di sini: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ dengan beberapa penelitian tambahan yang dapat ditemukan di sana.

Agar word-wrap:break-word;dapat bekerja untuk saya, saya harus memastikan bahwa displaydiatur ke block, dan bahwa lebar ditetapkan pada elemen. Di Safari, itu harus memiliki ptag dan widthharus ditetapkan ex.

Jika Anda menggunakan PHP maka fungsi wordwrap berfungsi dengan baik untuk ini: http://php.net/manual/en/function.wordwrap.php

Solusi CSS word-wrap: break-word; tampaknya tidak konsisten di semua browser.

Bahasa sisi server lain memiliki fungsi yang serupa - atau dapat dibuat dengan tangan.

Inilah cara kerja fungsi PHP wordwrap:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

Ini membungkus string pada 50 karakter dengan tag <br>. Parameter 'true' memaksa string untuk dipotong.

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

Gunakan <wbr>tag:

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

Saya pikir ini lebih baik daripada menggunakan ruang dengan lebar nol ​yang dapat menyebabkan masalah saat Anda menyalin teks.

Dalam kasus di mana tabel tidak berukuran tetap, baris di bawah ini berfungsi untuk saya:

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

hanya pengaturan widthdan penambahan yang floatberfungsi untuk saya :-)

width:100%;
float:left;