retorno - CSS: ¿cómo puedo forzar una cadena larga(sin ningún espacio en blanco) para envolverla en XUL y/o HTML?

salto de linea html/n

Question

Tengo una cadena larga (una secuencia de ADN). No contiene ningún personaje de espacio en blanco. p.ej:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

¿cuál sería el selector css para forzar este texto a envolver en un html: textarea o en un xul: cuadro de texto

Answer 1

$ string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$ wrappedstring = html_entity_decode (wordwrap ($ cadena, 50, "<br>", verdadero)); este es el código correcto

Answer 2

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;

Answer 3

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

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Answer 4

En un caso en el que la mesa no es de tamaño fijo, debajo de la línea funcionó para mí:

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

Answer 5

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í.

Answer 6

No creo que puedas hacer esto con CSS. En cambio, en "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 envuelve, que puede ser o no lo que usted desea.

Nota Safari parece envolver la cadena larga en un <textarea> todos modos, a diferencia de Firefox.

Answer 7

Para el word-wrap:break-word; para trabajar para mí, tenía que asegurarme de que la display estaba configurada para block y que el ancho estaba establecido en el elemento. En Safari, tenía que tener una etiqueta p y el width tenía que configurarse en ex .

Answer 8

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 . Usé overflow:auto , ya que muestra todo el texto tanto en mis navegadores Opera como IE.

Answer 9

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

El word-wrap: break-word; solución CSS word-wrap: break-word; no parece ser consistente 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 ajuste de palabras de 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 cuerda.

Answer 10

Use la etiqueta <wbr> :

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

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

Answer 11

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 CSS de espacio en blanco. Para cubrir las incoherencias del navegador, debe declararlo de varias maneras. Así que simplemente coloque su cadena de looooong en un elemento de nivel de bloque (por ejemplo, div, pre, p) y déle 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) use la mezcla forzada de Compass .

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

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

Referencia: envolviendo contenido

Answer 12

para elementos de bloque

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

para elementos en línea

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

Answer 13

simplemente establecer width y agregar float funcionó para mí :-)

width:100%;
float:left;

Answer 14

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