Como evito el desborde de texto con CSS3?

Word Wrap

Word-wrap es una propiedad creada por Microsoft para la nueva versión de CSS. Esta propiedad soluciona el “problema de cadena de texto” cortándolo en partes para que las palabras largas no desborden de su caja o contenedor.


La propiedad con el valor a utilizar en la hoja de estilos seria word-wrap: break-word, y para este caso declararlo en la clase “Texto” para que el párrafo de dicha clase muestre el efecto.


En la primera gráfica se puede ver como desborda la cadena, y en el segundo como la clase texto la corta y la distribuye en el div.

Código CSS

.caja{
width:200px;
border:1px solid #999999;
color:#333333;
background-color:#FFFFCC;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
margin-bottom:20px;
}
.texto{
word-wrap: break-word;
}

Código xHtml

<p>Lorem ipsum dolor sit amet, consectetur adipiscingelitVestibulusedsemutloremsemperportaVestibulumanteipsump ultrices posuere cubilia Curae <p>
<p class="texto">Texto con word - wrap Lorem ipsum dolor sit amet, consectetur adipiscingelitVestibulusedsemutloremsemperportaVestibulumanteipsump ultrices posuere cubilia Curae <p>

Resultado

word-wrap

Una Respuesta a “Como evito el desborde de texto con CSS3?”

  1. lalo dice:

    buen aporte, me resolvió mi problema

Deja un comentario