texto que sobrepasa div

[elier_rp]

hola a todos , he estado leyendo en el foro y he visto un poco las soluciones a este problema pero ninguna me vale , necesito que el texto al llegar al ancho del div haga un salto de linea , hasta ahora he visto ejemplos que si tienes palabras en una misma linea separadas por espacio si hace bien el salto , ahora si por ejemplo en la primera linea la palabra es mas grande que el ancho del div se sale , sabe alguien como puedo solucionar esto

un saludo y gracias de antemano...

[ArturoGallegos]

yo te diria que mejor redimenciones tu diseño, digo para que una sola palabra sea mas larga que el ancho de tu div wow si que deve ser muy estrecho...
y como tu dijiste en la linea de texto la ultima palabra ace el salto automaticamente cuando llegas al limite del div no debe darte problamas ni tienes que buscar alternativas

[Fueguino]

Probaste poniendole ancho fijo?

[elier_rp]

hola , esto de una palabra fue por poner un ejemplo en realidad caben unas 3 o 4 palabras , pero si la ultima es un poco larga ya se sale , y si , le tengo puesto un ancho de 180px y height en auto , no se puede hacer por css que automaticamente si la palabra va a ser mas grande que el div la pase abajo ???

un saludo

[imagen021]

si marcaste un width y no respeta ese ancho, mira que tienes puesto en el overflow...

Declarar el height en auto es lo mismo que no declararlo...

Saludos!!

[furoya]

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

...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>¬¬¬¬¬¬¬&shy;Gui&oacute;n&shy;De&shy;Corte&shy;¬¬¬¬¬</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>&amp;shy;</tt> (<i>soft hyphen</i>). IE 7, FF 3, Op 9.5</h2>
<b>No acepta etiquetas ni "espacio de no separaci&oacute;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&Oacute;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&Oacute;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.

[kseso?]

Buenas.
Con la propiedad 'white-space', en combinación con 'overflow' y si es necesario 'text-align' (por cuestión de estética) puedes controlar el flujo de texto en un div.
Para que la línea no se salga del espacio asignado puedes usar:

pre-wrap: se respetan los espacios en blanco y las nuevas líneas, pero ajustando
cada línea al espacio asignado para ese contenido.

pre-line: elimina los espacios en blanco y respeta las nuevas líneas, pero ajustando
cada línea al espacio asignado para ese contenido.

Espero te sirva de orientación.
Un saludo, Furoya

[Mikmoro]

Entiendo todo vuestro desarrollo y la exposición de soluciones, pero en este caso estoy con Ag666: si tu caja es más estrecha que una sola de tus palabras, hay un importante problema de diseño, a no ser que hables de ciencia y de repente salga la palabra "desoxiribonucleico" o algo similar donde nunca se le podría esperar, en cuyo caso el error no es de diseño sino de planteamiento.

[furoya]

No creo, kseso?. Habría que hacer más pruebas, pero no me parece que ajuste contenido como quiere elier_rp. Si tienes algún ejemplo completo lo puedes postear, así lo vemos. De todas formas, me parece que ya encontré el CSS que faltaba (lo pongo más abajo).

Con respecto al 'importante problema de diseño', Mikmoro, no siempre será así. Cuando escribimos código para una página no tenemos ningún control sobre cómo se verá en todos los casos; no sabemos cuántos monitores tiene el usuario, ni sus pulgadas, ni la resolución de pantalla, ni el tamaño de la ventana,ni la eventual fuente de reemplazo, ni qué medidas tiene ésta disponible, ni qué medidas le configuró en el default, ni a qué tamaño la va a llevar mientras navega ... Se supone que el browser se va a ajustar solo, pero si no lo hace vamos a tener que inventar algo hasta que lo arreglen.
En la época en que la mayoría usaba PC con Windows y con IExplorer las cosas eran más fáciles, porque generalmente se usaban las mismas fuentes que venían en el S.O., y ese navegador no cambiaba sus medidas absolutas. Pero ahora hay que pensar más en los otros.

Es cierto que los ejemplos que puse (y pondré) son extremos, pero escribir "desoxirribonucléico" no puede destartalar una página. El error no puede estar en el diseño.

Hace algún tiempo en un foro buscaban "la palabra más larga", y no es posible que el HTML no nos permita escribir "PENTAKISMYRIOHEXAKISQUILIOTETRACOSIOHEXACONTAPENT AGONALIS".

Iba a poner algo sobre el tema que enlacé más arriba y que ya fue cerrado, pero no vale la pena. Los siguientes ejemplos que recopilé estarían mejor allí, y ahora van acá con tu bendición, elier_rp.


Hay unos códigos para Firefox que ayudan a que el contenido de una caja no se "desborde" cuando ésta llega a su límite

Código:

-moz-max-content ; -moz-min-content ; -moz-available ; -moz-fit-content

pero el que pude probar que anda en todos es float: left;

Un detalle : el foro agrega espacios al código para no desarmar el diseño de los mensajes, y justo en este tema (¡qué ironía!) se necesitan cadenas largas sin corte para hacer la pruebas. Si aparece algún espacio de más, por favor bórrenlo antes de ver el ejemplo. Gracias.

Código HTML:

<!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>MIN-WIDTH.</title>
<style type="text/css">

body {color: #ffffff; background-color:#000000; font-size:100%; }
.miDIV {margin:0.2em; font-size:3em; float:left; min-width:80%; color: #000000; background-color:#ffffff; margin:10px; border: 0.1em red solid; }

</style>

</head>
<body>

<h2>Muestra contenido completo ajustando la caja. (Op9.5 / FF3 / IE7)</h2>

<div class="miDIV" title="min-width:80%">>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ<</div>
<div class="miDIV" title="min-width:80%">>0123456789<</div>

</body>
</html> 

La vieja versión con expression() para IE todavía funciona. Acá hay una más.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>min-width PARA IE7.</title>
<style type="text/css">

body {color: #ffffff; background-color: #000000; font-size: 100%; }
.miDIV {font-size: 3em; color: #000000; background-color: #ffffff; margin: 10px; display: inline-block; width: expression(this.firstChild.offsetWidth +'px'); min-width:50%; }
tt {white-space: nowrap; }

</style>
</head>
<body>
<h2>Iguala ancho del <tt>div</tt> y el contenido. (Op9.5 / FF3 / IE7 —con <tt>expression()</tt>—)</h2>

<div title="min-width: 50%;" class=miDIV>
<span>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</span></div>

<div title="min-width: 50%;" class=miDIV><span>>_<</span></div>


</body>
</html> 

Ésta es otra forma de ajuste con javascript

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html>
<head>
<title>ESTIRA.</title>
<script type="text/javascript">

var parrafo;

function estira0(){
parrafo = document.getElementById("miDIV0");
texto = "<span>"+ parrafo.innerHTML +"</span>";

parrafo.innerHTML = texto;

setTimeout("estira1()", 100);
}

function estira1(){
var ancho0 = parrafo.firstChild.offsetWidth;
var ancho1 = parrafo.offsetWidth;;

if (ancho0 > ancho1){
parrafo.style.width = ancho0 +"px";
}
}

//onload = estira0;
</script>
<style type="text/css">

body {color: #ffffff; background-color: #000000; font-size: 100%; }
#miDIV0 {font-size: 2em; width: 80%; color: #000080; background-color: #ffffff; border: 0.1em #ff0000 solid; }
tt {font-size: 100%; }
</style>
</head>
<body>
<h2>Iguala ancho del <tt>div</tt> y el contenido con javascript. (Op9.5 / FF3 / IE7)</h2>
<b>Click en el p&aacute;rrafo para ajustar.</b>

<div id="miDIV0" onclick="estira0()"> FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_ESTIRAR_EL_CONTENEDOR_HASTA_QUE_GUARDE_EL_CONTENIDO </div>

</body>
</html> 

Una versión del anterior

Código HTML:

<!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>DESPLIEGA.</title>

<style type="text/css">

body {color: #ffffff; background-color: #000000; font-size: 100%; }
div.desplegable {font-size:3em; width:80%; color: #000000; background-color: #ffffff; margin: 10px; border: 0.1em #ff0000 solid; overflow: hidden; }
div.desplegable:hover {overflow: visible; }
.miTexto {background-color: #ffffff; }

</style>
</head>
<body>
<h2>Muestra contenido al pasar el puntero. (Op9.5 / FF3 / IE7)</h2>
<b>Para desplazar, click con bot&oacute;n del medio sobre el contenido. (<em>bug</em> en Firefox : <u>no pasar el puntero sobre la marca de <em>all-scroll</em> !</u> )</b>

<div class=desplegable>
<span class=miTexto>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</span>
</div>

</body>
</html> 

(Continúa en el próximo mensaje ...)

[furoya]

(... viene del mensaje anterior.)

A partir de aquí ya no se estira la caja, sino que se desplaza el contenido.

Con barras de desplazamiento

Código HTML:

<!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>"ESCROLEA".</title>

<style type="text/css">

body {color: #ffffff; background-color:#000000; font-size:100%; }
div.escroleable {font-size:3em; width:80%; height:1.2em; color: #000000; background-color:#ffffff; margin:10px; border: 0.1em #ff0000 solid; overflow: hidden; }
div.escroleable:hover {overflow:auto; height:1.5em; }

</style>
</head>
<body>
<h2>Muestra barras de desplazamiento al pasar el puntero. (Op9.5 / FF3.0 / IE7.0)</h2>

<div class=escroleable>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</div>

</body>
</html> 

Con la ruedita

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>RUEDA.</title>
<script type="text/javascript">
var T00, T01, ancho00, ancho01;
var arrastra = 0;

function medidas(T00) {
T01 = T00.firstChild;
ancho01 = T01.offsetWidth;
ancho00 = T00.offsetWidth;
var alto = T01.offsetHeight;

T00.style.height = alto +"px";
T00.style.position = "relative";
T01.style.position = "absolute";
}

function ruedaOpIE(T00){
arrastra = parseInt(T01.style.left);

if (event.wheelDelta >= 120){
arrastra = (arrastra < ancho00)? arrastra + 20 : (ancho01*-1);
document.title = arrastra;
}

else if (event.wheelDelta <= -120){
arrastra = (arrastra < (ancho01*-1))? ancho00 : arrastra - 20;
document.title = arrastra;
}

T01.style.left = arrastra +"px";
}

</script>
<style type="text/css">

body {color: #ffffff; background-color: #000000; font-size: 100%; }
tt {font-size: 100%; }
#miDIV00 {font-size: 2em; width: 80%; color: #000000; background-color: #ffffff; border: 0.2em #ff0000 solid; overflow: hidden; }

</style>
</head>
<body>
<h2>Rueda el contenido del <tt>div</tt>. (Op9.5 / IE7)</h2>
<strong>Para <em>mouse</em> (rat&oacute;n) con ruedita.</strong>

<div id="miDIV00" onmouseover="medidas(this)" onmousewheel="ruedaOpIE(this)" ><div id="miDIV01" style="left:0">FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_DESPLAZAR_A_IZQUIERDA_O_DERECHA_CON_LA_RUEDA_DEL_RAT&Oacute;N_Y_VER_TODO_EL_CONTENIDO</div></div>

<strong><u>Nota</u> : en IE7 se cuelga al usar el Zoom.</strong>
</body>
</html> 

Arrastrando

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>ARRASTRA.</title>
<script type="text/javascript">
var puntoX, puntoY, despl, coordX, texto, coordXdesp;
var arrastra = 0;

function alturas(T00) {

texto = T00.firstChild;
var alto = texto.offsetHeight;

T00.style.height = alto +"px";
T00.style.position = "relative";
texto.style.position = "absolute";

}

function mueve(e, T00){

puntoX = (document.all) ? e.x : e.pageX; 

coordXdesp = puntoX - (coordX - despl);

if(arrastra == 1)texto.style.left = coordXdesp +"px";

document.title = puntoX + " "+ despl + " "+ coordXdesp;

}

function mide0(T01){
arrastra = 1;
T01.style.cursor = (T01.style.cursor == "-moz-grab")? "-moz-grabbing" : "move";

despl = parseInt(T01.style.left);
coordX = puntoX;

document.title = puntoX + " "+ despl + " "+ coordXdesp +" "+T01.style.cursor;
}

function mide1(T01){
arrastra = 0;

T01.style.cursor = (T01.style.cursor != "move")? "-moz-grab" : "move";

document.title = puntoX + " "+ despl + " "+ coordXdesp +" "+T01.style.cursor;

}

</script>
<style type="text/css">

body {color: #ffffff; background-color: #000000; font-size: 100%; }
tt {font-size: 100%; }
#miDIV00 {font-size: 2em; width: 80%; color: #000080; background-color: #ffffff; border: 0.2em #ff0000 solid; overflow: hidden; }
#miDIV00 #miDIV01 {-moz-user-select: none; cursor: move; }

</style>
</head>
<body>
<h2>Arrastra el contenido del <tt>div</tt>. (Op9.5 / FF3 / IE7)</h2>
<b>Esta versi&oacute;n no permite seleccionar.</b>

<div id="miDIV00" onmouseover="alturas(this)" onmousemove="mueve(event, this)"><div style="cursor:-moz-grab; left:0; " id="miDIV01" onmouseout="mide1(this)" onmouseup="mide1(this)" onmousedown="mide0(this)" unselectable="on" >FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_ARRASTRAR_A_IZQUIERDA_O_DERECHA_Y_VER_TODO_EL_CONTENIDO</div></div>

</body>
</html> 

Y uno muy triste

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>INPUT.</title>
<style type="text/css">

body {color: #ffffff; background-color:#000000; font-size:100%; }
#miINP1 {font-size:3em; wi dth:80%; color: #000000; back ground-color:#ffffff; margin:10px; border: 0.1em red solid; }

</style>

</head>
<body>

<h2>Texto en un <tt>input</tt>. (Op9.5 / FF3 / IE7)</h2>
<b><i>Bug</i> IE / Op : para desplazar hay que seleccionar el texto. Si se le quita <tt>readonly</tt> se puede editar.</b>

<input type=text readonly=readonly id="miINP1" value=">0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ<">

</body>
</html> 

Son todos borradores que actualicé para postear acá. Y son todos perfectibles. Están para destriparlos a gusto.

[Mikmoro]

Según tus ejemplos, furoya, veo que no debí entender la consulta original; creí que en ningún caso se trataba de estirar la caja sino todo lo contrario.

Por otro lado, soy bastante aficionado a la accesibilidad, y por eso mismo te diré que cuando una persona necesita tener por defecto un cuerpo de letra de 36px en su navegador o tiene un monitor de 12" lo sabe, y sabe que se encontrará con cosas que verá de forma diferente a como estaban pensadas (como si usa un lector de pantalla o un navegador de texto), de manera que, aunque hagamos todo el esfuerzo posible por respetar al máximo la diversidad, hay un punto que no podremos alcanzar, porque si lo consigues con ese cuerpo de 36px, te preguntaré qué pasa con los que usan un cuerpo de 72px, y si hablas de colores seguros te hablaré de las pantallas de fósforo. ¿Me explico?

Hay un límite real que debemos conocer, y pensar que un sola parabra pueda ser dividida para que no salga de su caja al aumentar el tipo me parece irreal, además de una filigrama innecesaria. Siempre habrá un monitor, resolución, necesidad, etcétera, que quedará fuera de nuestro alcance.

Es mi opinión, pero sé que es irrelevante. Es una decisión personal.

P.D.: ah, y cuando encuentres una solución definitiva con CSS, te presentaré a una persona que navega sin CSS.

[furoya]

Iniciado por Mikmoro

...ah, y cuando encuentres una solución definitiva con CSS, te presentaré a una persona que navega sin CSS. ...

Muy gracioso, Mikmoro. Recuerdo haber comentado con kemie ( Hola!) que yo miraba las páginas sin CSS, pero ya no me acuerdo de cuándo te lo mencioné a ti. Pero como los baches de memoria a mi edad son muy comunes, no pienso hacerme problemas por ese detalle. Lo que sí digamos es que eso a nosotros nos sirve para ver la estructura de la página, quitamos la hoja de estilos con fines de estudio. La gente normal no lo hace y navega con CSS habilitado.

En realidad volví para actualizar un ejemplo, pero si no menciono tu mensaje anterior va a parecer que te estoy ignorando, y no es mi intención. No voy a detenerme punto por punto, porque la mayoría de tus dudas ya estaban aclaradas y bastaría con un "Lege, quaeso." al comienzo del mensaje. Voy a mencionar algunas a modo de resumen.

No sé si dividir una palabra en cualquier parte es lo que se dice 'irreal', aunque sí se ve bastante extraño; es lo primero que le expliqué a elier_rp. Y sí, entendiste la consulta original : le mostré un ejemplo CSS, otro HTML y una versión JS; supongo que le habrán servido porque hasta ahora no volvió. Ahí se terminó el asunto y pasamos al siguiente, que entonces sí es estirar las cajas. Es lo que se debe hacer en lugar de 'cortar palabras'.

Lo de la accesibilidad es justamente lo que estaba explicando : no podemos cubrir todas las posibilidades. Por supuesto, si alguien lo logra será un gran diseñador; pero si las capas se le enciman es un inútil.
Lo lógico es que si vemos una página (p.e.) en menor resolución, el tamaño se agrande y debamos usar —digamos— barras de desplazamiento para ver lo que no cabe. Si un bloque con la lista de baners 'flota' a la derecha y al redimensionar la ventana ya no tiene espacio, seguramente terminará al final del documento. Es absolutamente cierto que el navegante "se encontrará con cosas que verá de forma diferente a como estaban pensadas (por el diseñador)". Lo que nunca puede ocurrir es que el contenido se pierda, y que ya no lo encuentre "ni diferente".

Como dije, los ejemplos estarían mejor en el otro tema (¿lo leíste?), pero me lo cerraron porque siempre aparece alguien que no se aguanta el complejo de genio y quiere resolver lo que ya está resuelto o superado. De todas formas, y ya que están aquí, los aproveché para demostrar claramente qué pasa cuando el contenido se desborda. En el primer ejemplo usé texto azul derrapado sobre un fondo negro. Es evidente para cualquiera que si el texto hubiese sido negro, no se podría ver. Igual, en los siguientes ejemplos ya lo puse en negro, por si aparecía algún despistado. También podría haber usado una imagen de fondo para mostrar cómo las letras se mezclaban con partes oscuras del diseño, o poner más capas para que el desborde se solapara con los demás contenidos. Pero ya hubiera sido tratar a nuestra comunidad de idiota, y se me iban a ofender con justa razón. Con estos ejemplos quedó más que claro por qué no se debe desbordar el contenido.

Y de entre las posibles divague-soluciones, hay una que usa CSS para agregar scrollbars pop-up, pero no anda en IE 6.Allí hay que usar JS.
Para mantener la compatibilidad, les dejo otra versión

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>"ESCROLEA".</title>

<style type="text/css">

body {color: #ffffff; background-color:#000000; font-size:100%; }
div.escroleable , div.paraIE {font-size:3em; width:80%; height:1.2em; color: #000000; background-color:#ffffff; margin:10px; border: 0.1em #ff0000 solid; overflow: hidden; }
div.escroleable:hover , div.paraIE {overflow:auto; height:1.8em; }
</style>
</head>
<body>

<!--[if lt IE 7.0000]> 
<script type="text/javascript">
function escrolIE(){
var IDs = document.getElementsByTagName("div");
var totIDs = IDs.length;
for(d=0; d<totIDs; d++){
if(IDs[d].className == "escroleable"){
IDs[d]['onmouseover'] = new Function('this.className = "paraIE"');
IDs[d]['onmouseout'] = new Function('this.className = "escroleable"');
}}}
onload = escrolIE;
</script>
<![endif]-->

<h2>Muestra barras de desplazamiento al pasar el puntero. (Op9.5 / FF3.0 / Ch0.2 / IE7.0 con CSS; IE6 con JS)</h2>

<div class=escroleable>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</div>

</body>
</html> 

Lo cierto es que me alegra que al final estuviéramos de acuerdo. Pero sigo insistiendo : si me van a discutir ... por favor, lean mis mensajes!!!

Saludos

furoya

[Mikmoro]

Iniciado por furoya

Muy gracioso, Mikmoro. Recuerdo haber comentado con kemie ( Hola!) que yo miraba las páginas sin CSS, pero ya no me acuerdo de cuándo te lo mencioné a ti.

Pues no, yo tampoco recuerdo que me lo hubieras mencionado nunca; de hecho, no me refería a ti, sino a gente de la que tengo constancia que navega sin la css del diseñador. No era una gracia; era cierto.

[furoya]

Bueno, entonces insisto : no es gente normal. Aunque hay una pequeña diferencia entre "navegar sin CSS" y "navegar sin la CSS del diseñador".

Un detalle que aprovecho para aclarar (aún más) ahora, es que el saber que cada persona va a ver el documento de una manera distinta no es excusa para mandar cualquier cosa, pensando que "si lo ve bien, mejor; y si no, es su culpa". Quien tiene que ocuparse de que la página se entienda correctamente en todos los casos, es el diseñador. Y si no puede, pero tiene vocación por el diseño, que se dedique a la gráfica. Ahí el usuario no le va a andar estirando el papel ni cambiando el tamaño de las letras. Porque aquí las reglas son otras.
Uno tolera las páginas mal hechas porque sabe que los formatos web son muy limitados, y que no todas las buenas ideas se pueden lograr en todos los casos. Pero una idea mediocre que se desarma con un resize de ventana no tiene perdón.


Volviendo a lo nuestro. Entre los ejemplos que puse arriba me negué a postear uno por evidente : la marquesina.
Sabemos que funciona practicamente en todos los navegadores, pero resulta que hace un año me compré un teléfono celular cuyos nombres en los menúes excedían el ancho de la pantalla, y el método que usaba para mostrarlos completos era el marquee altern. Era insoportable esperar el vayven del texto para saber qué elegir.

Sin embargo, voy a agregar ahora ese ejemplo para Safari, porque resulta que webkit lo tenía previsto en CSS justamente para el overflow.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>MARQUEE WEBKIT.</title>
<style type="text/css">
body{color:#ffffff; background-color:#000000; font-size:100%; }
#despl {color:#000000; background-color:#ffffff; 
font:bold 3em arial, helvetica, sans-serif; white-space:nowrap; 
overflow-y:-webkit-marquee; -webkit-marquee-style:slide; width:8em; }
</style>
</head>
<body>
<h2>Evita el desborde del texto con desplazamiento autom&aacute;tico. (Saf, Chr)</h2>

<div id="despl">1 FOROS DEL WEB. 2 FOROS DEL WEB. 3 FOROS DEL WEB.</div>
</body>
</html> 

En el ejemplo está como slide.


modificar codigo scroll

Velocidad para el Marquee



P.D. : ¡No lo puedo creer! ¡Éste es mi mensaje número 1000! ¡Por fin llegué al kilopost!.

[Dalvenjha]

En definitiva si tengo que sacarme el sombrero por alguien aqui, es por FUROYA, simplemente por la capacidad de investigación y por la terquedad para seguir estudiando las cosas, he leido poco de tus aportes ya que soy relativamente nuevo, porque a pesar de tener membresía del año pasado recién desde inicios de enero estoy participando realmente.

Saludos y mi completa admiración.

Luis, un amigo.

[cslbcn]

Iniciado por furoya

Hola todos :

Debería empezar este mensaje con una disculpa, elier_rp; te voy a contar por qué.

[....]

El CSS que fuerza el ajuste de linea, aún cortando una palabra, es word-wrap: break-word


[...]

No sabes cuanto te lo agradezco. En dreamweaver (cs4) no sale esa propiedad CSS, pero todos los navegadores actuales reconoces esa propiedad y la ejecutan, cortando el texto si no sabe en el espacio indicado.

No es necesario nada más, un Div con un ancho y un word-wrap: break-word

[furoya]

Muchas gracias a ti, cslbcn. Cada 2 ó 3 años se me da por actualizar viejos temas para que funcionen con los nuevos navegadores; ahora no estoy teniendo mucho tiempo para hacerlo y ni se me hubiera ocurrido que word-wrap: break-word ya estaba en Opera, Firefox o Chrome., por eso valoro mucho cuando alguien se toma el trabajo de actualizar la información.

P.D. : No es que esté ignorando el mensaje de Dalvenjha, lo que pasa es que ya le agradecí cuando hablamos por mensaje privado y me da un poco de vergüenza volver sobre el asunto. Sigo creyendo que exageró algo.

[emprear]

Entiendo que este es un Post viejo, pero en vista de que he leido ultimamente muchos post referidos a este tema (me refiero al original, expueso por elier_rp)
Dejo aqui tambien una posible solución


elier_rp:
Ateniendome a tu post original, te comento que esto

http://foros.emprear.com/html/word-w...en-celdas.html

hace el ajuste que pides (en el ejemplo esta en un <pre> dentro de una celda, pero funciona en un div.

Compatible con Internet explorer 6+, Firefox 3.1+, Opera 10+, Chrome, Safari 4

Saludos

[furoya]

Ahora está un poquito más claro.
Y es cierto, en los div funciona ya en navegadores nuevos, pero veo que había hacks para los anteriores, además de CSS en distintas versiones. Creo que de eso hablaba kseso?.

Lo del pre me extrañó bastante. Supuse que era un truco para forzar al texto a que se quedase dentro de la celda, porque allí hay elementos anidados por necesidad y los problemas de tamaño y ajustes son graves. Pero estuve haciendo un par de pruebas, y si no uso unidades de ancho relativas la tabla se ajusta bien a la celda (que sí debe tener una medida). Dejo un ejemplo que usé para esas pruebas.

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>WRAPPING.</title>

<style type="text/css">

.principal{
border: 2px black solid;
background-color: silver;
width: 500px;
float: left;

white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP */
word-wrap: break-word; /* IE 5+ */
}

</style>
</head>
<body>
<table style="margin-bottom: 20px; float: left; background: red;">
<tbody style="background: green;">
<tr style="background: blue;">
<td class="principal">
ggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww
</td>
</tr>
</tbody>
</table>

<table style="background: red; clear: both;">
<tbody style="background: green;">
<tr style="background: blue;">
<td class="principal">
ggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww
</td>
</tr>
</tbody>
</table>
</body>
</html>

Si aparecen espacios en el texto de relleno, los borran.

Ahora pienso que ese pre está para versiones más antiguas. En fin, la única recomendación es cambiarle la fuente, para que no aparezca por default una monospace.

Gracias, emprear.

Ancho celda tabla fijo

Textarea sin scrollbars

[emprear]

furoya:

Cuando estuve viendo este tema, alguien me indicó que en Chrome no funcionaba, después de varias pruebas, observé la necesidad del tag <pre>.
Pero revisando tu código noto lo sigueinte
que si utilizo, (como yo lo hice
table#principal td, hace falta el pre en Chrome pero si defino una clase y se la aplico a la celda, el <pre> es innecesario, como tu lo hiciste


bueno, un paso menos, voy a reformular mi ejemplo


saludos y gracias por el aporte

[furoya]

No, de nada. Le sigo dando vueltas de molesto que soy, nomás. Aunque debo confesar que ese ejemplo que puse tiene el truco del float: left. Lo que debí hacer es meter otra celda más, porque resulta que las table data en realidad no flotan a la izquierda en el bloque table row, y si se acaba el espacio en el ancho de documento, se supone que una tabla lo supera y salta la scrollbar. Pero si ponemos a flotar las celdas resulta que se acomodan abajo. Así que no anda.

Lo estuve pensando un rato. Eso del pre tampoco estaría mal, pero resulta que es una caja para texto preformado. Y semanticamente no cabe para meter texto "común". Sí, ya sé, yo no soy el más indicado para quejarme; mientras un truco funcione lo uso contra las quejas de todos. Pero si se puede evitar, mejor; y si lo que va dentro de la celda es un párrafo muy largo que hay que ajustar hacia abajo, lo que podemos poner es justamente una etiqueta <p>.

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>WRAPPING.</title>

<style type="text/css">

.principal{
border: 2px black solid;
background-color: silver;
width: 500px; /*EL ANCHO DEBE ESTAR DECLARADO*/
float: left;
margin: 0;

white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP */
word-wrap: break-word; /* IE 5+ */

}

</style>
</head>
<body>

<table style="margin-bottom: 20px; background: red; ">
<tbody style="background: green; ">
<tr style="background: blue; ">
<td>
<p class="principal">UNOggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</p>
</td><td>
<p class="principal">DOSggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</p>
</td><td>
<p class="principal">TREggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</p></td>
</tr>
</tbody>
</table>

<table style="background: red; ">
<tbody style="background: green; ">
<tr style="background: blue; ">
<td class="principal">
CUAggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</td>
</tr>
</tbody>
</table>

</body>
</html>

Igual hay que probar mucho antes de considerar el asunto como resuelto. A mi anteriormente se me dio por meter ejemplos para ver el contenido completo con algún desplazamiento más que nada porque sirven para desarmarlos y aprender —como digo siempre, a los que recién empiezan le son útiles—, pero ya no voy a seguir, está mejor volver al asunto original.

Y no te preocupes por el tiempo. En temas donde nos dedicamos a encontrar soluciones no puede haber fecha de vencimiento. A mí se me cae una idea por año, y ya tengo varios temas pendientes.
El asunto es que no venga nadie a postear cualquier cosa y lo arruine; pero mientras sea un aporte, nos van a tolerar.




(Creo...)

[emprear]

furoya:
gracias por la molestia. Entre lo que tenia y lo que saque de tus conclusiones creo que ya me doy por satisfecho con la solución.
recuerdo que alguna vez lei un manual de CSS, muy bien hecho y completo, y despues de "comerme" literalmente, decenas de reglas, terminaba diciendo algo mas o menos asi
"El css termina siendo algo intuitivo, el mejor aprendizaje se logra probando, probando y probando..." y creo que le doy la razón

Volviendo a los tiempos, esto es como la televisión, los programas son lo mismo de siempre, pero el público se renueva.

saludos

[furoya]

Levanto el tema para consultar por una variante de ajuste de línea bastante particular, y que no vi ni se me ocurre cómo hacerlo con HTML y/o CSS.

Pero antes quiero contar que no volví en principio por eso, sino para "corregir" un enlace que debí poner más arriba. El punto es que ante el argumento de Mikmoro sobre

...en este caso estoy con Ag666: si tu caja es más estrecha que una sola de tus palabras, hay un importante problema de diseño, a no ser que hables de ciencia y de repente salga la palabra "desoxiribonucleico" o algo similar donde nunca se le podría esperar, en cuyo caso el error no es de diseño sino de planteamiento.

estaba seguro de haberle puesto como ejemplo un caso —para nada extraño— de una discusión sobre ¡justamente! "la palabra más larga" en español u otros idiomas, porque allí hasta se terminó analizando el nombre de un polígono de 56.645 ó 56.465 lados con etimología griega.
Y resulta que no lo encontré.
Sí, tal cual. Olvidé ponerlo.
Lo grave es que el sitio de ese link ya no existe, y para que no quedara huérfano me tomé el trabajo de hacer una copia, reescribir y recopilar todos sus enlaces, meterlos en una carpeta, rarearla y subirla a megaplod ... antes de mirar que aquí nunca había citado el documento .

Como no voy a soportar el haber hecho todo ese trabajo de balde, ahora sí lo pongo

Copia de "La palabra mas largaaaaaaaa" (del foro-virtual, con enlaces hasta 1er. nivel. Tamaño del archivo: 562.29 KB)

Qué embromar.

Y no fue lo único que olvidé. Pude haber puesto otro indiscutible ejemplo citando la letra de una vieja película de Disney, que proclamaba a supercalifragilisticoexpialidoso como la palabra más larga.
Evidentemente no estuve muy despierto cuando respondí a este tema.

Pero algo decente tenía que salir, y por leer todo el texto buscando un link, mientras pensaba en la letra de una canción, me di cuenta de que hay un formato de ajuste que no está contemplado en las páginas web. Y es el caso en que el verso de una poesía es demasiado largo y se sale del espacio asignado al poema. En gráfica, se corta y continúa abajo, y para que no se confunda con el siguiente verso se alínea a la derecha, coincidiendo su fin con el último caracter de la línea cortada. algo así como esto :

Código:

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░ Existe un recurso usado para escribir poesía ░
░ que corta el ancho de una línea si no cabe ┐ ░
░                                  el verso. ┘ ░
░ Pregunté en el Foro porque de veras no sabía ░
░ si en CSS hay alguna forma para hacerlo.     ░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

donde vemos que la segunda no cabe entera y termina debajo, antes de la tercera (los corchetes son opcionales).

Si alguien lo vio o sabe cómo hacerlo, agradezco que ponga un ejemplo acá, así completamos el tema.

Gracias.


http://es.wikipedia.org/wiki/Superca...icoexpialidoso

http://www.musica.com/letras.asp?letra=1169009

[andres001]

A la pregunta porque se sale el texto del div cuando la palabra es muy larga se soluciona así:

Le pones en la hoja de estilo word-wrap:break-word;

Ej: el div mide width:100px y la frase es un correo [email protected] el word-wrap "rompe" la frase y la sitúa en la siguiente linea; esta es una propiedad de CSS3.

Viene por acá buscando ayuda sobre esto y me acorde de la propiedad jaja...

[furoya]

La "pregunta" ya fue respondida, andres001. Y con mucho más detalle.

Trata de no volver a agregar mensajes inútiles, porque estás arriesgando el cierre del tema, y no sabemos cuando haya que hacer otra actualización.

[kseso?]

Iniciado por furoya

Pero algo decente tenía que salir, y por leer todo el texto buscando un link, mientras pensaba en la letra de una canción, me di cuenta de que hay un formato de ajuste que no está contemplado en las páginas web. Y es el caso en que el verso de una poesía es demasiado largo y se sale del espacio asignado al poema. En gráfica, se corta y continúa abajo, y para que no se confunda con el siguiente verso se alínea a la derecha, coincidiendo su fin con el último caracter de la línea cortada. algo así como esto :

Código:

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░ Existe un recurso usado para escribir poesía ░
░ que corta el ancho de una línea si no cabe ┐ ░
░                                  el verso. ┘ ░
░ Pregunté en el Foro porque de veras no sabía ░
░ si en CSS hay alguna forma para hacerlo.     ░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

donde vemos que la segunda no cabe entera y termina debajo, antes de la tercera (los corchetes son opcionales).

Si alguien lo vio o sabe cómo hacerlo, agradezco que ponga un ejemplo acá, así completamos el tema.

Gracias.

Este tema, entre unas cosas y otras se me había pasado.
Así que planteada una cuestión original (nada de cómo centrar u otras por el estilo) no es cuestión de que quede al menos una aproximación.

Sí hay forma, Furoya. Aunque con alguna cosilla que habría que terminar de pulir:

Código CSS:

p {
    direction: rtl;
    text-align: justify; /*opcional right*/
}
 

Ya se que no queda muy estético el texto justificado o alineado a la derecha.
No se si se podrá arreglar algo con la pseudoclase ::first-line. Tendré qe jugar algo con ello.
Pero cuando teniendo tiempo no sea tan a destiempo (es la 1:00 am local)

Ya diréis si podría servir o no.

[furoya]

Mmmmmm...nop.

Mira como queda

Código HTML:

<!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></title>
<style type="text/css">
p {
    background-color: yellow;
    direction: rtl;
    text-align: justify; /*opcional right*/
    width: 19em;
}
</style>
</head>
<body>

<p>
Existe un recurso usado para escribir poesía<br>
que corta el ancho de una línea si no cabe el verso.<br>
Pregunté en el Foro porque de veras no sabía<br>
si en CSS hay alguna forma para hacerlo.<br>
</p>

<hr>

<p>Existe un recurso usado para escribir poesía</p>
<p>que corta el ancho de una línea si no cabe el verso.</p>
<p>Pregunté en el Foro porque de veras no sabía</p>
<p>si en CSS hay alguna forma para hacerlo.</p>

</body>
</html> 

La estrofa va en un solo párrafo, como en el primer ejemplo. Si metemos un verso en cada párrafo se puede hacer algo (cambiando direction por writing-mode que deja el punto en su lugar), pero resulta que first-line no acepta cambios de dirección. En IE hay una manera de cambiar la alineación de la última linea, pero hasta donde sé no es compatible con otros; de cualquier forma, si el verso se corta en más de dos lineas (algo improbable, pero posible) el diseño se nos descalabra de nuevo.

Hay otro asunto, y es que el corte que se baja debería estar alineado con el fin de la parte que queda arriba. Creo que algo han hecho para eso

http://www.w3.org/TR/2003/CR-css3-te...14/#text-align

pero habría que estudiarlo. Lo que quiero decir es que con mandarlo a la derecha no alcanza. A menos que cada párrafo tome el ancho exacto de cada verso, que va a ser un poco menor que el declarado como máximo.

No estaría mal crear una etiqueta <verse> o parecida, que contenga su alineación diferenciada, su ancho mínimo y máximo, y el salto al siguiente verso. Parecida a las listas, pero semanticamente correctas.

[kseso?]

Mea culpa. Di por supuesto y obvio demasiado.

A ver si es este el efecto que buscabas, Furoya.



el html utilizado:

Código HTML:

<div class="contenedor">
   <p>
     Existe un recurso usado para escribir poesía<br />
     que corta el ancho de una línea si no cabe el verso<br />
     Pregunté en el Foro porque de veras no sabía<br />
     si en CSS hay alguna forma para hacerlo fácilmente<br />
   </p>
</div>
 

[furoya]

Faltaría alinearlo a la izquierda, y que el break forzado en cada verso se siga manteniendo a la derecha, terminando justo a la altura del fragmento inicial.

No. No es fácil. Si tenemos que manejarlo linea por linea no sé si es negocio, pero sospecho que no queda otra.

[furoya]

La verdad es que por ahora lo veo difícil de hacer con CSS solamente. Ya existen propuestas para fit-content y con alguna combinación creo que andaría, pero hasta que no sea compatible no lo vamos a usar.
Para que quede claro lo que estoy sugiriendo, les dejo un ejemplo de lo que debería hacer el navegador con la etiqueta correspondiente (en el código usé span y div a falta de otras mejores).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>VERSIFICACIÓN.</title>
<script type="text/javascript">

var versos;

function versea(){
versos = document.getElementById("estrofa");
var sepVersos = (versos.innerHTML.replace(/<BR>/gi,"<br>")).split("<br>");

var totVersos = sepVersos.length;
//alert(sepVersos+ " " +totVersos)

for(i=0; i<totVersos; i++){
var esteVerso = versos.getElementsByTagName("span")[i];
var ancho = esteVerso.offsetWidth;
//alert(ancho)
esteVerso.style.width = ancho +"px";
//alert(versos.innerHTML)
}

var ajustaVersos = versos.innerHTML.replace(/span/gi,"div");
ajustaVersos = ajustaVersos.replace(/<BR>/gi,"");
versos.innerHTML = ajustaVersos;
//alert(versos.innerHTML)
}

</script>

<style type="text/css">

body {
	color: white;
	background-color: black;
}

#estrofa {
	color: black;
	background-color: yellow;
	width: 19em;
	font-size: 16px;
}

.verso {
	background-color: silver;
	text-align: right;
}

.cebra {
	background-color: white;
}

</style>
</head>
<body>

<h2>Simula un formato de poes&iacute;a.</h2>

<div id=estrofa>

<span class="verso cebra" class=verso>Existe un recurso usado para escribir poesía</span><br>
<span class=verso>que corta el ancho de una línea si no cabe el verso.</span><br>
<span class="verso cebra">Pregunté en el Foro porque de veras no sabía</span><br>
<span class=verso>si en CSS hay alguna forma para hacerlo.</span>

</div>

<input type=button value="formato verso" onclick="versea(); this.disabled='disabled';">

</body>
</html> 

Igual te agradezco mucho el tiempo y el trabajo que te estás tomando, kseso?, siempre se puede seguir probando algo más.

P.D. : Y ya me está dando vergüenza esa rima barata que puse ... ...