css - with - Envoltura de una cadena muy larga

css wrap content

Question

¿Cómo se puede mostrar una cadena larga, una dirección de sitio web, una palabra o un conjunto de símbolos con saltos de línea automáticos para mantener un ancho div? Supongo que es una especie de respuesta. Por lo general, la adición de un espacio funciona, pero ¿hay una solución de CSS como el ajuste de palabras?

Por ejemplo, (muy desagradablemente) se superpone a los divs, obliga a desplazarse horizontalmente, etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

¿Qué puedo agregar a la cadena anterior para que quepa perfectamente dentro de unas líneas en un div o dentro de la ventana del navegador?

Answer 1

Acabo de mencionar esto here pero probablemente sea más relevante para esta pregunta. La mejor propiedad en breve será overflow-wrap. y el mejor valor si se implementa sería:

* {
   overflow-wrap:hyphenate. 
}

Todavía no parece ser compatible de ninguna manera al momento de escribir en el iPhone o Firefox, y overflow-wrap: hyphenate ni siquiera está en borrador.

Mientras tanto, usaría:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

Answer 2

Especifique siempre la propiedad de altura de línea; si no especifica, puede causar el error de su word-break: break-all; propiedad.

Answer 3

Esperemos que algún día tengamos acceso a la propiedad de ajuste de word-wrap en CSS3: Forzar el ajuste: la propiedad ''ajuste de texto'' .

Algún día...

Answer 4

Esta pregunta se ha hecho aquí antes:

• ¿Quién ha resuelto el problema de la palabra larga-rompe-mi-div? (sugerencia: no )
• ajuste de palabras en css / js
• CSS: ¿cómo puedo forzar una cadena larga (sin ningún espacio en blanco) para envolverla en XUL y / o HTML?
• Desbordamiento CSS con URL larga

Larga historia corta:

En cuanto a las soluciones CSS, tienes: overflow: scroll; para forzar al elemento a mostrar las barras de desplazamiento y el overflow:hidden; para cortar cualquier texto adicional. Hay text-overflow:ellipsis; y word-wrap: break-word; pero solo son IE (sin embargo, break-word está en el borrador de CSS3, por lo que será la solución a estos 5 años a partir de ahora).

La conclusión es que si es muy importante para usted evitar que esto ocurra al envolver el texto en la siguiente línea, la única solución razonable es inyectar ­ (guión suave), <wbr> (etiqueta de salto de palabra), o ​ (espacio de ancho cero, el mismo efecto que ­ menos guión) en el lado del servidor de cadenas. Si no te importa Javascript, sin embargo, existe el hyphenator que parece ser bastante sólido.

Answer 5

Normalmente Cells lo hará de forma natural, pero puedes forzar este comportamiento en un div con:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Answer 6

Parece que este es el truco para la última versión de Chrome:

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

No he comprobado ninguno de los navegadores, pero Chrome.

Answer 7

Uso el código para evitar cadenas largas, URL, etc.

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Answer 8

word-break:break-all funciona como un regalo

Answer 9

word-wrap: break-word; está disponible en los navegadores IE7 +, FF 3.5 y Webkit (Safari / Chrome, etc.). Para manejar IE6 también necesitarás declarar el ajuste de word-wrap: break-all;

Si FF 2.0 no está en la matriz de su navegador, entonces usarlos es una solución viable. Desafortunadamente no se pliega la línea anterior donde se rompe la palabra, que es una pesadilla tipográfica. Sugeriría usar el Hyphenator como lo sugiere Paolo, que es JavaScript discreto. El repliegue para usuarios que no tienen JavaScript activado será la palabra rota sin guiones. Puedo vivir con eso por el momento. Este problema probablemente surja en un CMS, donde el diseñador web no tiene control sobre qué contenido se ingresará o dónde se pueden implementar los saltos de línea y los guiones suaves.

He echado un vistazo a la especificación W3 donde se discute la separación silábica en CSS3. Desafortunadamente, parece que hay algunas sugerencias, pero nada concreto todavía. Parece que los proveedores de navegadores aún no han implementado nada. He revisado tanto Mozilla como Webkit para ver el código propietario, pero no hay signos de ninguno.

Answer 10

display: block; overflow: hidden; text-overflow: ellipsis; width: 200px; // or whatever is best for you