HTML5

Cómo evitar que un texto salga de un div en HTML

Al desarrollar un sitio web en HTML y CSS nos podemos encontrar con muchos problemas, uno muy recurrente ocurre cuando tenemos un texto muy largo dentro de un div con un tamaño fijo, al ser tan largo puede pasar que sobrepase la etiqueta que lo contiene. En este tutorial veremos cómo evitar que un texto salga de un div en HTML.

¿Cómo evitar que un texto salga de un div en HTML?

Para evitar esto vamos a utilizar la propiedad CSS3 llamada word-wrap, en el siguiente ejemplo tenemos un div de un tamaño fijo con una palabra grande:

<!DOCTYPE html>
<html>
  <head>
    <title>Cómo evitar que un texto salga de un div en HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
	  #contenedor{
	    width: 50px;
	    background: red;
	  }
	</style>
  </head>
  <body>
    <div id="contenedor">
	PalabraMuyLarga 
    </div>
  </body>
</html>

Si no utilizamos la propiedad word-wrap el resultado sería el siguiente.

Div sin CSS3 word-wrap

Div sin CSS3 word-wrap

Ahora con tan solo agregar la propiedad word-wrap con el valor break-word la palabra se va a partir, permitiendo así que no salga del contenedor div:

<!DOCTYPE html>
<html>
  <head>
    <title>Cómo evitar que un texto salga de un div en HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      #contenedor{
        width: 50px;
        background: red;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div id="contenedor">
      PalabraMuyLarga 
    </div>
  </body>
</html>

En este caso el resultado sería:

Div con CSS3 word-wrap

Div con CSS3 word-wrap

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo evitar que un texto salga de un div en HTML. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

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