Jueves, 20 Abril 2017 12:32

Consultorio web: La propiedad word-break

Valora este artículo
(0 votos)

Propiedad word-break

Evitar quiebre de palabras con CSS3

Respondiendo a consulta "¿Cómo evitar el quiebre de palabras en HTML5 a través de CSS3?

La respuesta más directa en este sentido está en el uso de la propiedad word-break del css, a la cual le asignaremos el valor keep-all; un código básico al respecto es el siguiente:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>La propiedad word-break en CSS.</title>
<style type="text/css">
/*
Propiedad word-break
Valores posible Description
normal Es el valor, las palabras quiebran de manera normal.
break-all La palabra puede quebrarse entre medio de dos letras cualquiera.
keep-all Se prohiben los quiebres de palabras.
*/
p {
width: 80%;
border: 1px solid red;
margin:10px auto;
}
.conQuiebre {
word-break: break-all;
}
.sinQuiebre {
word-break: keep-all;
}
</style>
</head>

<body>
<p class="conQuiebre">
<strong>Respuesta a consulta: Comportamiento obtenido actualmente en la página.</strong><br>
Esternocleidooccipitomastoideo electroencefalografista electroencefalografía dihidroxidofenilalaninabetacarboxilasa electroencefalograma hiperesternocleidomastoideitis otorrinolaringólogo electrocardiograma electrodoméstico ciclopentanoperhidrofenantreno arteriosclerosis esternocleidomastoideísticamente paralelepípedo caleidoscopio constitucionalísticamente desconsoladamente desproporcionadisimamente electroencefalograficamente electroencefalografistas inconstitucionalmente otorrinolaringológicamente antigubernamentalisticamente
</p>
<p class="sinQuiebre">
<strong>Respuesta a consulta: Párrafo con la propiedad word-break fijada en keep-all.</strong><br>
Esternocleidooccipitomastoideo electroencefalografista electroencefalografía dihidroxidofenilalaninabetacarboxilasa electroencefalograma hiperesternocleidomastoideitis otorrinolaringólogo electrocardiograma electrodoméstico ciclopentanoperhidrofenantreno arteriosclerosis esternocleidomastoideísticamente paralelepípedo caleidoscopio constitucionalísticamente desconsoladamente desproporcionadisimamente electroencefalograficamente electroencefalografistas inconstitucionalmente otorrinolaringológicamente antigubernamentalisticamente
</p>
</body>
</html>

Es posible ver la vista en vivo del código anterior en este enlace, y descargar el ejemplo haciendo clic aquí.

Nota Importante: Tal como se destaca en el código del ejemplo, para la separación en guiones el W3C a actualizado la propiedad a overflow-wrap; aunque, al momento de la publicación de este ejemplo, aún no está implementada en casi ningún navegador actual.

Saludos para todos!
Plácido Luna.

Visto 219 veces Modificado por última vez en Jueves, 20 Abril 2017 13:05