html - not - word wrap css

¿Por qué word-wrap no funciona correctamente en CSS3? (6)

De acuerdo, sé que esta es una pregunta antigua, pero creo seriamente que podría haber alguna aclaración útil sobre cuándo usar qué propiedad. Mirando las respuestas existentes, siento que ofrecen soluciones sin explicación, así que aquí está mi intento de ayudar con eso. Para el contexto, de forma predeterminada, el contenedor no intentará dividir una sola palabra larga porque desea preservar la palabra en su forma original.

Dicho esto, hay tres formas principales de dividir las palabras: hay un overflow-wrap , word-break y un hypens . Sin embargo, no voy a sumergirme demasiado en el hypens.

Entonces primero fuera. Veo word-wrap se está usando el word-wrap en la pregunta, pero al leer la documentación, que está en desuso y algunos navegadores han decidido simplemente crear un alias para overflow-wrap en overflow-wrap . Probablemente es preferible no usar eso.

La distinción entre las dos propiedades es bastante clara en la documentación, pero para mayor claridad, overflow-wrap realmente solo tiene dos valores posibles y detectará si una palabra se ha desbordado. Si lo hace, por defecto mueve la palabra completa a la siguiente línea. Si se establece la break-word corte, solo se dividirá la palabra si no se puede colocar toda la palabra en esa línea.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; font-weight: normal; line-height: 18px; width: 238px; height:38px; cursor: pointer; overflow-wrap: break-word; border:2px solid; } #sp { }

<div id="fos"> <span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span> </div>

Puede ver la palabra neumonoul ... pausas largas exactamente donde debe hacerlo en la siguiente línea después de que intenta separar la palabra larga.

Ahora en contraste, tenemos word-break . Esto tiene propiedades más granulares y en realidad también tiene una opción de break-word . Esto es sinónimo del fragmento de código anterior, de modo que, cuando usar uno u otro, creo que es bastante trivial.

Sin embargo, word-break también ofrece un valor de break-all que siempre que sea posible se ajustará a la palabra original. No intenta averiguar si necesita que la palabra esté en una nueva línea o no, simplemente empuja el salto de línea donde se desborda. La mayor distinción aquí de la anterior es que la palabra larga que usamos ahora está todavía en la parte superior.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; font-weight: normal; line-height: 18px; width: 238px; height:38px; cursor: pointer; word-break: break-all; border:2px solid; } #sp { }

<div id="fos"> <span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span> </div>

Y finalmente, para los hyphens tienen su propia forma especial de separar las palabras. Para más información echar un vistazo a la documentación . También vale la pena señalar que los diferentes idiomas tienen diferentes maneras de dividir las palabras, pero afortunadamente la propiedad de los hyphens enlaza con el atributo lang y entiende qué hacer.

Otra opción que la gente ha sugerido es usar la propiedad de white-space que intenta dividir el texto en espacios . En el ejemplo que utilicé, esto no ayuda a nuestra situación porque la palabra en sí es más larga que el contenedor. Creo que lo importante a tener en cuenta acerca de esta propiedad de CSS es que no intenta dividir las palabras dentro de sí mismos y, más bien, intenta hacerlo a través de espacios cuando sea apropiado.

<div id="fos"> <span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span> </div>

Espero que esto ayude.

¿Por qué la propiedad de ajuste de palabras no funciona correctamente en el siguiente ejemplo?

http://jsfiddle.net/k5VET/739/

¿Qué puedo hacer para garantizar que parte de la palabra ''consectetur'' encaje en la primera línea? Quiero que el máximo número de caracteres quepa en cada línea.

El CSS es:

Debido a que el ajuste de palabras css no funciona en todos los navegadores, ¡use JavaScript en su lugar! Debería dar el mismo resultado.

La función siguiente requiere JQuery y se ejecutará cada vez que cambie el tamaño de la ventana.

La función verifica si el elemento tiene más ancho que su padre, y si lo tiene, rompe todo en lugar de solo palabras. No queremos que los niños crezcan más que sus padres, ¿verdad?

Solo lo necesitaba para las tablas, así que si lo quieres en algún otro elemento, simplemente cambia la "tabla" a "#yourId" o ".yourClass". Asegúrate de que haya un div entre padres o cambiar "div" por "cuerpo" o algo así.

Si va a otra parte, cambia a un salto de palabra y luego comprueba si debería volver a cambiar, por eso hay tanto código ...: ''/

#fos { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

¡Espero que te sirva!

Esto es útil para envolver el texto en una línea:

$(window).on(''resize'',function() { $(''table'').each(function(){ if($(this).width() > $(this).parent(''div'').width()){ $(this).css(''word-break'', ''break-all''); } else{ $(this).css(''word-break'', ''break-word''); if($(this).width() > $(this).parent(''div'').width()){ $(this).css(''word-break'', ''break-all''); } } }); }).trigger(''resize'');

No se ajusta correctamente, porque los navegadores no aplican guiones automáticos (lo que sería la forma de provocar un ajuste adecuado ) de forma predeterminada. Necesita utilizar la separación silábica de CSS o la separación silábica basada en JavaScipt. La definición de ajuste de la word-wrap:break-word , así como también word-break: break-all , por definición, rompe las palabras (las divide en partes en puntos arbitrarios), en lugar de la envoltura adecuada.

Si word-wrap: break-all no funciona, intente también agregar esto:

white-space:normal;

trabaja para mí con la clase .btn en Bootstrap 3

Use la word-break: break-all;

DEMO EN VIVO