Psychotik

solucionando marrones desde 2003

Partiendo palabras con “word-break” y “word-wrap”

Pertenece a  Tips  el 12 Enero
Partiendo textos de forma lógica con word-break

Se podría decir que ambas propiedades, “word-break” y “word-wrap” sirven para lo mismo, partir palabras largas en base al ancho de un contenedor. La principal diferencia entre ambas es que “word-break” rompe las palabras sin tener en cuenta la ortografía y trata de buscar una cuadratura visual (falsa alineación justificada). Al contrario que “word-wrap“, que mantiene la alineación y parte las palabras con algo más de lógica. La otra diferencia, fundamental por si todavía se duda de como utilizarlas, es que w-break se utiliza más para partir palabras en idiomas asiáticos (Chino, japonés…) y w-wrap para el resto según el W3C. Para el ejemplo utilizo un pequeño texto en inglés sacado del Samuel L. Ipsum (una de las muchas alternativas al Lorem ipsum de toda la vida), para que veáis la diferencia más facilmente.

Codigo CSS (Word-break):

.break{
   /* El valor que permite romper las palabras es “break-all” */
   word-break:break-all;
}

Resultado:

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. http://www.http://www.psychotik.net/ofertas-de-trabajo-aburridas-en-una-profesion-creativa-infografia/.com. Now, I don’t know exactly when we turned on each other, but I know that seven of us survived the slide… and only five made it out. Now we took an oath, that I’m breaking now. We said we’d say it was the snow that killed the other two, but it wasn’t. Nature is lethal but it doesn’t hold a candle to man.

Codigo CSS (Word-wrap):

.wrap{
   /* Su principal valor es “break-word”, ya que es el que permite romper palabras que de manera natural serían “irrompibles” */
   word-wrap:break-word;
}

Resultado:

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. http://www.http://www.psychotik.net/ofertas-de-trabajo-aburridas-en-una-profesion-creativa-infografia/.com. Now, I don’t know exactly when we turned on each other, but I know that seven of us survived the slide… and only five made it out. Now we took an oath, that I’m breaking now. We said we’d say it was the snow that killed the other two, but it wasn’t. Nature is lethal but it doesn’t hold a candle to man.

Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »