¿Cómo puedo forzar una cadena larga sin ningún espacio en blanco para envolverla?

Tengo una cadena larga (una secuencia de ADN). No contiene ningún carácter de espacio en blanco.

Por ejemplo:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

¿Cuál sería el selector CSS para forzar que este texto se envuelva en una html:textareao en una xul:textbox?

para elementos de bloque:

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

para elementos en línea:

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

Coloque espacios de ancho cero en los puntos donde desea permitir descansos. El espacio de ancho cero está ​en HTML. Por ejemplo:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Aquí hay algunas respuestas muy útiles:

¿Cómo evitar que palabras largas rompan mi div?

para ahorrarle tiempo, esto se puede resolver 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;

Para mí esto funciona

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

También puede usar un div dentro de otro div en lugar de td. Solía overflow:auto, ya que muestra todo el texto tanto en mi navegador Opera como en mi IE.

No creo que puedas hacer esto con CSS. En cambio, a 'longitudes de palabra' regulares a lo largo de la cadena, inserte un guión suave HTML:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Esto mostrará un guión al final de la línea, donde se ajusta, lo que puede o no ser lo que desea.

Tenga en cuenta que Safari parece envolver la cadena larga de <textarea>todos modos, a diferencia de Firefox.

Use un método CSS para forzar el ajuste de una cadena que no tenga espacios en blanco. Tres métodos:

1) Use la propiedad de espacio en blanco CSS. Para cubrir las inconsistencias del navegador, debe declararlo de varias maneras. Así que simplemente coloque su cadena muuuuuuuuu en algún elemento de nivel de bloque (por ejemplo, div, pre, p) y dele a ese elemento el siguiente 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) usa el mixin de forzado y envoltura de Compass .

3) También estaba investigando esto y creo que también podría funcionar (pero necesito probar el soporte del navegador más completamente):

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

Referencia: contenido de envoltura

Mi camino a seguir (cuando no hay una forma adecuada de insertar caracteres especiales) a través de 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;

Como se encuentra aquí: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ con algunas investigaciones adicionales que se encuentran allí.

Para word-wrap:break-word;trabajar para mí, tenía que asegurarme de que displayestaba configurado en block, y que el ancho estaba establecido en el elemento. En Safari, tenía que tener una petiqueta y widthhabía que configurarlo ex.

Si está utilizando PHP, la función wordwrap funciona bien para esto: http://php.net/manual/en/function.wordwrap.php

La solución CSS word-wrap: break-word; no parece ser coherente en todos los navegadores.

Otros lenguajes del lado del servidor tienen funciones similares, o pueden construirse a mano.

Así es como funciona la función de wordwrap PHP:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

Esto envuelve la cadena a 50 caracteres con una etiqueta <br>. El parámetro 'verdadero' obliga a cortar la cadena.

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

Usar <wbr>etiqueta:

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

Creo que esto es mejor que usar un espacio de ancho cero ​que podría causar problemas al copiar el texto.

En un caso donde la tabla no es de tamaño fijo, la siguiente línea funcionó para mí:

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

solo configurar widthy agregar floatfuncionó para mí :-)

width:100%;
float:left;