Blog
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.
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:
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.
Yo tengo una pregunta, ¿Como implementan los cuadros de código en su página?
Es que me da curiosidad puesto que pareciese un editor y el código lo contiene sin importar que sean varias líneas de código ¿usan alguna herramienta especial o es escritura de código?, perdon por la pregunta pero me gustaría implementar algo similar en un proyecto escolar.
Hola, bueno ante todo gracias, mandé un comentario anteriormente pero no se si se envio, igual disculpas.
La pregunta es totalmente agena al post.
Verá estoy trabajando con un blog personal por petición del profesor para chequear tareas en línea en mi escuela, y justamente hablamos mucho sobre programacion, estudio la carrera de Ing. en Sistemas Computacionales, y bueno en el blog es muy común postear codigo, lo cual hago mediante capturas de pantalla que tomo sobre mi editor, sin embargo siento que podria hacer algo mejor.
Consultaba su pagina para tomar ideas a desarrollar para mi blog y me gusto mucho el recuadro sobre el cual postea el código html, el cual aparenta ser un editor tipo Notepad++. De manera que me preguntaba, ¿utilizan alguna herramienta para colocarlo? (puesto que he visto que varias páginas web utilizan un formato similar para postear código) o es código escrito a mano y reciclado para cada entrada que lo requiera.
En fin me gustaría aprender a utilizarlo, disculpe si resulta en algun tipo de incomodidad pero solo queria aprender, he chequeado el códido html que puede dejarme ver el navegador, pero sinceramente veo que ocupa ciertos estilos css, y en general no me gustaría tomar código de esa manera. Es por eso que escribo el comentario.
Hola Ambrocio, muchas gracias por pasarte por el blog. Te comento que para este sitio yo estoy utilizando WordPress y para poder mostrar el código de esa forma utilizo el plugin SyntaxHighlighter Evolved. Cualquier otra duda avisame. Un saludo.