Come posso forzare una stringa lunga senza alcuno spazio da avvolgere?

Ho una lunga corda (una sequenza di DNA). Non contiene caratteri di spazi bianchi.

Per esempio:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Quale sarebbe il selettore CSS per forzare questo testo da racchiudere in un html:textareao in un xul:textbox?

per elementi a blocchi:

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

per elementi in linea:

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

Posizionare spazi di larghezza zero nei punti in cui si desidera consentire le interruzioni. Lo spazio di larghezza zero è ​in HTML. Per esempio:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Ecco alcune risposte molto utili:

Come impedire alle parole lunghe di interrompere il mio div?

per risparmiare tempo, questo può essere risolto con 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;

Per me questo funziona,

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

Puoi anche usare un div all'interno di un altro div invece di td. Ho usato overflow:auto, in quanto mostra tutto il testo sia nei miei browser Opera che IE.

Non credo che tu possa farlo con i CSS. Invece, a 'lunghezze di parole' regolari lungo la stringa, inserisci un trattino soft HTML:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Questo mostrerà un trattino alla fine della linea, dove si avvolge, che può essere o meno quello che vuoi.

Nota Safari sembra avvolgere la lunga stringa in un modo <textarea>, a differenza di Firefox.

Utilizzare un metodo CSS per forzare l'avvolgimento di una stringa che non ha spazi bianchi. Tre metodi:

1) Utilizzare la proprietà dello spazio bianco CSS. Per coprire le incoerenze del browser, devi dichiararlo in diversi modi. Quindi inserisci la tua stringa looooong in un elemento a livello di blocco (ad esempio, div, pre, p) e dai a quell'elemento il seguente 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) utilizzare il mixin avvolgente forzato di Compass .

3) Stavo solo esaminando questo e penso che potrebbe anche funzionare (ma ho bisogno di testare il supporto del browser in modo più completo):

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

Riferimento: contenuto a capo

La mia strada da percorrere (quando non esiste un modo appropriato per inserire caratteri speciali) tramite 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;

Come trovato qui: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ con alcune ricerche aggiuntive che si possono trovare lì.

Per word-wrap:break-word;funzionare per me, ho dovuto assicurarmi che displayfosse impostato su blocke che la larghezza fosse impostata sull'elemento. In Safari, doveva avere un ptag e widthdoveva essere impostato ex.

Se stai usando PHP, la funzione wordwrap funziona bene per questo: http://php.net/manual/en/function.wordwrap.php

La soluzione CSS word-wrap: break-word;non sembra essere coerente su tutti i browser.

Altre lingue lato server hanno funzioni simili o possono essere costruite a mano.

Ecco come funziona la funzione di wordwrap PHP:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

Questo avvolge la stringa di 50 caratteri con un tag <br>. Il parametro 'true' forza il taglio della stringa.

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

Usa <wbr>tag:

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

Penso che sia meglio che usare uno spazio di larghezza zero ​che potrebbe causare problemi quando copi il testo.

Nel caso in cui la tabella non sia di dimensioni fisse, la riga sotto ha funzionato per me:

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

solo l'impostazione widthe l'aggiunta ha floatfunzionato per me :-)

width:100%;
float:left;