word-break: cortar palabras muy largas con css3

Ferchu Css, Html

Tal vez alguna vez te topaste con el problema, que si bien no es muy común, a algunos nos ha pasado y nos ha dado un pequeño dolor de cabeza, aquellas palabras que son muy largas y que al sobrepasar el límite de ancho de su contenedor se salen afuera, algo cómo esto:

Cómo se ve en la imagen, la palabra «saraza…» se sale de la caja. Las soluciones son muchas. La más violenta para mí es agregarle a esa caja una propiedad «overflow: hidden», lo que hará esto es eliminar todo aquello que aparezca afuera de su elemento contenedor, debido a que no hay palabras tan largas, así que está bien que corte. Pero el problema es que puede ingresar algo como una url muy larga o bien, aquellas personas que escriben cosas como «siiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii» y si el «sí» es muy largo no podremos ver la cantidad de «i» que el usuario quiso expresar. Otras soluciones serían ir cortando las palabras muy margas y tirarlas abajo con Javascript o PHP, pero css3 trae consigo una solución que es más fácil:

word-break: break-all;

Esto hará que todas aquellas palabras que son muy largas al encontrarse con el límite del ancho de su contenedor se corten y sigan en la línea de abajo.

Por ejemplo algo como esto:

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css">
       #contenedor {
          width: 300px;
          padding: 10px;
          border: solid 1px #000; 
          background-color: lightskyblue;
          word-break: break-all;
       }
    </style>
 </head>
 <body>
    <div id="contenedor">
       <p> La propiedad word-break sirve para evitar que palabras muy largas se salgan de la caja en donde están contenidas </p>
       <p> Por ejemplo la palabra sarazatatatetetapatapaopaopayayayayasarazatatatetetapatapaopaopayayayaya </p>
    </div>
 </body>
</html>

Solucionaría el problema anterior:

 

 

 

 

 

 

 

 

Saludos!

 

8 Replies to “word-break: cortar palabras muy largas con css3”

Comments are closed.