texto que sobrepasa div

emprear · #31 (**permalink**) 20/10/2011, 12:34

@Furoya
No sé si con css lo vas a conseguir, pero tu originalidad merece un

Saludos

furoya · #32 (**permalink**) 21/10/2011, 14:01

Gracias, pero lo mio no es "perseverancia" ... es "testarudez".

(Nota : "Chiste para dos."

Je.)

emprear · #33 (**permalink**) 21/10/2011, 14:53

No señor, sin lugar a dudas es perseverancia, porque yo con "testarudos" no trato

zeddes · #34 (**permalink**) 21/10/2011, 15:37

El tema comenzo en el 2008 y se sigue en la vuelta?

Dios mío, al igual que el que posteo que ya debe estar viejo y calvo y pensando como limitar un div me encuentro en la misma situación.

A ver, pienso colocar una variable dentro del div que responderá a un formulario. Entonces en el div cuando se "echo la $variable (en este caso texto)" deberá no deformarse el div.

Necesito saber lo mismo que este hombre que comenzo el tema, que propiedad puedo aplicar en css para limitar el div y logre un salto de linea al llegar al borde.

Gracias si alguien sabe, por favor, MP o [email protected].

furoya · #35 (**permalink**) 24/10/2011, 16:03

¿Otro desubicado más?

¿Qué nos ven, cara de radiador de camión?

Bueno, volvamos al asunto, ... y promediemos en "terquedad para seguir estudiando las cosas", como dijo Dalvenjha (Así me sigues escribiendo mensajes)

Iba a editar el código anterior, porque al final mandé el borrador, que tiene alguna variable de más para la versión sin span y alguna clase de más por desprolijo que soy. Pero aprovecho a corregir acá

Creo que en vez de seguir experimentando hay que esperar a que metan esto en los navegadores, si es que alguna vez lo hacen. Pongo las dos versiones que tengo ya hechas porque están, y para darle un cierre digno y menos chapucero al asunto.

Con <span>

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>CON ETIQUETA SPAN.</title>
<script type="text/javascript">

function versea(){
var versos = document.getElementById("estrofa");
var totVersos = versos.getElementsByTagName("span").length;
//alert(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").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">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>

Sin <span>

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>SIN ETIQUETA SPAN.</title>
<script type="text/javascript">

var estrofa;
var versos;
var totVersos = [];
var contEstrofa = "";

function versea(){
estrofa = document.getElementById("estrofa");
var versos = estrofa.innerHTML.replace(/<BR>/gi, "</span><br>\r\n<span>");
estrofa.innerHTML = "<span>" +versos+ "</span>";

versea2();
}

function versea2(){
for(i=0; i<estrofa.getElementsByTagName("span").length; i++){
totVersos[i] = estrofa.getElementsByTagName("span")[i].offsetWidth;
}

for(i=0; i<totVersos.length; i++){
estrofa.getElementsByTagName("span")[i].style.width = totVersos[i] + "px";
}

contEstrofa = estrofa.innerHTML;

contEstrofa = contEstrofa.replace(/span/gi,"div").replace(/<br>/gi,"");

estrofa.innerHTML = contEstrofa;
}
</script>

<style type="text/css">

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

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

#estrofa div {
	text-align: right;
}

</style>
</head>
<body>

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

<div id=estrofa>

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>

</div>

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

</body>
</html>

(Hasta que se me ocurra ajustar otro engendro!)

emprear · #36 (**permalink**) 24/10/2011, 21:54

Este muchacho se quedó corto, yo me hice viejo, me quedé pelado, viajé a miami, me injerté unos bulbos que ya florecieron cual tulipanes (ahora me apodan el quincho, si les parece poco) y estoy de vuelta en el ruedo... y me quedo obviamente con la versión sin span. Aunque esto ya es una sublimación de javascript, con una vuelta de tuerca más, creo que no dejas rastro de css alguno.... dan ganas de mover el tema...
Saludos

furoya · #37 (**permalink**) 25/10/2011, 12:55

Uy!! ¡Cierto que no estamos en Javascript!

Bueno, es sólo un ejemplo de cómo debería comportarse la etiqueta: que acepte alineación, que sea de bloque, que no sobrepase a su contenedor y que se ajuste al ancho del contenido como si fuese inline.

Tampoco estamos pidiendo mucho ...

Con respecto a nuestro amigo, yo también le festejaría la gracia, pero me dio más por las pestañas que viniera a postear sin leer, que no viese que el asunto ya fue respondido hace años, que el tema siguió con ajustes para otros casos de los que estamos hablando ahora, que preguntara sobre lo que hoy ya se sabe en cualquier tutorial, que no pusiera un código de ejemplo (¡peor!, puso uno que ni se puede copiar y pegar para probarlo) y la remató con una dirección de correo o pretendiendo un MP, porque ni siquiera sabe cómo es la netiquette de un Foro.

Si lo hubiese hecho a propósito no le salía mejor.
Bah, si lo hubiese hecho a propósito, habría que banearlo.

Y hablando de banear ... en realidad falta que alguien le conteste de forma privada, y que zeddes lo mande al frente agradeciéndole "en público".

P.D. : Y por qué Miami? Los tulipanes no son de Holanda?

andres001 · #38 (**permalink**) 08/11/2012, 01:13

Cita:

Iniciado por 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...

Muchas gracias yo mismo, nuevamente buscando esto y encontré lo que había posteado ya hace un año, y hey "Furoya" que grosero tu parte llamar a mi aporte inútil cuando fue dado en el punto sin tanto rodeo y ridiculeces con las que usted salio...

furoya · #39 (**permalink**) 08/11/2012, 06:35

Cita:

Iniciado por andres001

... y hey "Furoya" que grosero tu parte llamar a mi aporte inútil cuando fue dado en el punto sin tanto rodeo y ridiculeces con las que usted salio...

Mucho menos grosero que repetir lo mismo que ya se puso y de forma parcial. La próxima vez lo pensás dos veces.
O no, no lo pensés, porque no vale la pena : simplemente no publiqués nada.

Y agradezco que a pesar de mensajes desubicados como el de andres001 no nos hayan cerrado el tema, porque gracias a las propuestas para CSS3 hay más posibilidades para resolver estos asuntos.
(Algo nuevo siempre vamos a inventar).