Hola todos :
Debería empezar este mensaje con una disculpa,
elier_rp; te voy a contar por qué.
Se supone que las palabras no se cortan, si son muy largas y no caben en su caja, ésta se estira hasta que entre todo el contenido. La página web no es un editor para texto, y aún cuando uses un elemento como
textarea, no siempre va a hacer un
wrap cortando una palabra a la mitad.
Sin embargo, el caso está previsto en CSS (por ahora sólo funciona en
IE) y también lo estaba en HTML (más abajo te explico cómo se resuelven, aunque el último no me parece práctico).
Pero lo que me motivó a ignorar tu tema cuando lo publicaste, fue la frase
Cita: ...si por ejemplo en la primera linea la palabra es mas grande que el ancho del div se sale...
Porque se me ocurrió que estabas viendo tu diseño en un sólo navegador, y suponías que en todos iba a pasar lo mismo. Pues no, el desborde de contenido cuando se termina el contenedor es un error de navegadores como
Firefox u
Opera, en
Internet Explorer le puedes dar un ancho a un
div y si el ususario agranda el tamaño del texto o por cualquier razón no cabe en su caja, ese ancho se ajusta, y si es necesario empuja al resto del documento para acomodarlo.
Por supuesto, el diseño general se desarma, pero de otra forma no sólo perdemos el diseño sino también el contenido, que es justamente lo que debemos preservar
el div contenido se sale fuera del div cuadro
Ahora bien, el origen de la disculpa está en que se me ocurrió probar todo esto en
Internet Explorer 7 / XP ... y tienes razón, ahora el
overflow: visible se comporta igual que los otros. Una desgracia, y más si tenemos en cuenta que el
min-width no funciona correctamente ni poniendo
display: inline-block. Un detalle grave que probé en
FF 3.0,
Opera 9.5 e
IE 7.0 es que los anchos de cajas solamente llegan hasta en borde del
body, pero su contenido lo sobrepasa, en vez de empujar todo. Estoy —casi— seguro de que hay alguna propiedad o valor CSS para forzar excepciones, pero en una primera búsqueda no los encontré. Si alguien ya los conoce y nos quiere ahorrar el trabajo de seguir leyendo tutoriales estaría muy bien que los linkeara o posteara aquí.
Estuve trabajando hace ya bastante tiempo con métodos (algunos muy brutos) para usar en
FF, pero nunca los publiqué. Ahora que todos tienen el mismo problema tal vez sea momento de postearlos; aunque más no sea como un inicio, muy experimental.
Pero no me olvidé de lo tuyo,
elier_rp. Te lo debo, es lo menos que puedo hacer ya que por tu mensaje descubrí el cambio de comportamiento en
width / overflow.
El CSS que fuerza el ajuste de linea, aún cortando una palabra, es
word-wrap: break-word texto y celdas, para expertos
pero de momento sólo anda en
IE, así que hay que inventar otra cosa.
Cuando se termina un renglón de una linea escrita en tinta, y ya no cabe el resto de una palabra, lo que se hace es poner un 'guión de corte' para seguir escribiendo en el renglón de abajo.
Pues en ASCII para HTML existe lo mismo. El problema es que en el papel sabemos dónde se nos termina el espacio y cortamos por la sílaba, en una página web no tenemos idea de dónde nos va a quedar cortado y no le podemos pedir al navegador que nos separe en sílabas. El caracter en cuestión es el 173 y su
entity ­. Es invisible hasta que el espacio se acaba, entonces aparece y crea un "salto" entre los caracteres que separa. Por supuesto que lo tenemos que escribir nosotros a ojo, eligiendo las palabras más largas y metiéndolo entre dos sílabas. O entre todas. O entre todos los caracteres ...
En el ejemplo puedes cambiar el tamaño de la fuente o restaurar y redimensionar la ventana para ver cómo se comporta cuando le falta espacio.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CORTA CON SOFT HYPHEN.</title>
<style type="text/css">
body {color: #ffffff; background-color:#000000; font-size:100%; }
#miDIV0 {font-size:2.5em; width:50%; color: #000000; background-color:#ffffff; margin:10px; }
</style>
</head>
<body>
<h2>El texto contiene guiones virtuales entre palabras.</h2>
<div id=miDIV0>¬¬¬¬¬¬¬­Guión­De­Corte­¬¬¬¬¬</div>
</body>
</html>
Y aquí tienes uno que coloca el 'guión virtual' —o
soft hyphen— caracter de por medio con javascript
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>DERRAPA.</title>
<script type="text/javascript">
function corta(){
var parrafo = document.getElementById("miDIV");
var texto = parrafo.innerHTML;
if ((texto.indexOf("<") == -1) && (texto.indexOf(">") == -1)){
texto = texto.split("").join("\u00ad");
parrafo.innerHTML = texto;
}
}
onload = corta;
</script>
<style type="text/css">
body {color: #ffffff; background-color:#000000; font-size:100%; }
#miDIV , .miDIV {font-size:2em; width:80%; color: #000080; background-color:#ffffff; margin:0.2em; }
tt {font-size: 100%; }
</style>
</head>
<body>
<h2>Separa caracteres con javascript insertando <tt>&shy;</tt> (<i>soft hyphen</i>). IE 7, FF 3, Op 9.5</h2>
<b>No acepta etiquetas ni "espacio de no separación".</b><br>
<i>Original : </i>
<div class=miDIV> FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_CORTAR_CON_UN_ESCRIPT_Y_CREAR_UN_WRAP_SIMULADO_CON_GUIÓN_VIRTUAL </div>
<i>Modificada : </i>
<div id=miDIV> FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_CORTAR_CON_UN_ESCRIPT_Y_CREAR_UN_WRAP_SIMULADO_CON_GUIÓN_VIRTUAL </div>
</body>
</html>
Si no quieres que se vea el guión, le puedes agregar al CSS
Código:
.oculto {font-size:1px; color:#ffffff; }
y al escript le cambias la linea
Código:
texto = texto.split("").join("<span class=\"oculto\">\u00ad</span>");
Pero
Opera no acepta el guión dentro de un
span. Y la verdad es que antes de hacer esto, conviene más reemplazar el
\u00ad por un espacio común y corriente, que corta las palabras igual. Lo dejo a tu gusto.
Si no te sirve nada de lo anterior, espérame un poco que busco y organizo los ejemplos para ajustar el
div, porque en vez de "acortar el texto", tal vez convenga "agrandar la caja", o desplazar el contenido, o desplegarlo, en fin ... hay varias opciones. Cuando las encuentre las posteo aquí.
Si alguien no me gana de mano y pone esa propiedad CSS que nos falta.