Como evito el desborde de texto con CSS3?

Css | Escrito por Ezequiel M. | Enero - 26 - 2010

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

Articulos relacionados:

    • Como transformo todo el Texto a Mayúsculas? Si hay algo en lo que se destaca CSS, es en el formateado de Texto. Mediante una simple propiedad, podemos transformar todo un texto a mayúsculas en un abrir y cerrar de ojos. Con la propiedad Text-transform: uppercase; transformamos todo el texto que esta dentro de las etiquetas xhtml que estemos usando, en este caso, pasamos
    • Como agrego sombra a un texto con CSS3? Text-Shadow es una de las nuevas propiedades en CSS3 que permite estilizar las fuentes. Esta propiedad es la solución a muchos trucos que se idearon para simular sombras en las fuentes de los sitios web. Esta propiedad actúa a modo gráfico sin duplicar el texto y sin generar una imagen. Los valores para la propiedad Text-shadow
    • Como creo bordes redondeados con CSS3? La problemática de simular bordes redondeados con recorte de imágenes y javascript se soluciona con la llegada de CSS3. La propiedad “Border-radius” permite redondear cajas con solo especificar un par de valores. Esta propiedad no esta estandarizada y para su óptimo funcionamiento necesita de propiedades soporte para los motores Webkit y Mozilla. En cada propiedad “Border-radius” se

Comentarios:

Deja tu opinion