dar ancho maximo a un parrafo

XxflezhaxX · #1 (**permalink**) 19/07/2010, 11:20

Hola amigos.
texto un texto demasiado extenso, sin saltos de linea ni nada.
lo tengo entre <span>.

y lo que quiero hacer es, darle un ancho limite, o sea, como por ejemplo, poner que el ancho sea 350px.
y automaticamente, de un salto de linea en los 350px de ancho, pero sin usar tablas.

espero y me haya entendido =P
saludos!!

Carlangueitor · #2 (**permalink**) 19/07/2010, 11:39

Pues nada más dale un ancho de 350 px, no veo cual es el problema. A menos que tengas palabras muy largas (mas de los 350px) no hay problema.

Y si es un párrafo usa la etiqueta <p> que para eso son.

Saludos

XxflezhaxX · #3 (**permalink**) 19/07/2010, 11:46

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
 
.estilo1 {
background-image:url("img/pic1.png");
width:350px;
height:100px;
}
 
.estilo2 {
background-image:url("img/pic1.png");
width:350px;
height:auto;
}
 
.estilo3 {
background-image:url("img/pic1.png");
width:350px;
height:100px;
}
 
span{
width:350px;
}
 
</style>
</head>
 
<body>
 
<div class="estilo1"></div>
<div class="estilo2"><span>ddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddd</span></div>
<div class="estilo3"></div>
 
</body>
</html>

XxflezhaxX · #4 (**permalink**) 19/07/2010, 11:48

LO HE PUESTO EN DOS POST, POR QUE HABIA UN PROBLEMA, EL CODE HTML, SE ENCIMABA AL DEMAS TEXTO.
Espero no sea molestia

he hecho un estilo de caja, con el background de arriba, enmedio y abajo.
en medio en donde texto el texto, y el ancho de la imagen es de 350px.

por lo que mi texto se sale de la imagen.

y si uso <p>, la caja se divide en 3 partes, o sea, el backgrpund de arriba, en mdio y abajo, y esto se debe a q el parrafo da un salto de linea, por eso uso span, y le agrego la propieda en CSS

Código CSS:

Ver originalspan {
width:350px;
}

y no me funciona.

Carlangueitor · #5 (**permalink**) 19/07/2010, 11:51

Pruebalo con un texto, ya que eso es una palabra sin espacios, y es lo que te comentaba, también puedes agregar: word-wrap: break-word; pero lo más fácil es que pruebes con un texto que tenga espacios.

Saludos

XxflezhaxX · #6 (**permalink**) 19/07/2010, 11:53

como como?
o sea, que ajuste el texto con saltos de linea?

y me podrias explicar eso de word-wrap etc.
que no he visto esto yo.

saludos

Carlangueitor · #7 (**permalink**) 19/07/2010, 11:59

A ver, lo que pasa es que en tu código tenias un texto así:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaa

Con las propiedades de ancho no puedes hacer que haga salto de linea, ya que el salto de linea es para palabras con espacios, y lo que tienes ahí, al no tener espacios la toma como una sola palabra y no la parte.

La única solución para textos así es usar la propiedad word-wrap, pero no sirve en ie y es de CSS3.

Por eso lo que tienes que hacer es usar un texto normal, sin palabras tan largas.

Saludos

emprear · #8 (**permalink**) 19/07/2010, 12:00

XxflezhaxX:

Realmente tienes una palabra de tantos caracteres?
Esto te va a servir probablemente

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

PD:
A propósito, funciona con IE 6+, FF, Opera, Safari 4 y Chrome...
Saludos

XxflezhaxX · #9 (**permalink**) 19/07/2010, 13:58

Gracias carlangueitor, lo que pasa que no entendia.
pero ya comprendi, y si, efectivamente usare texto normal, solo que yo ponia esa palabra tan laaaaaarga!! como ejemplo de la extension de un texto normal, y que la partiera en deternimado ancho.

entonces ese es el problema que no tiene espacios.

entonces al escribir normal.
ejemplo:

habia una vez, en aquella isla pequeñita, un naufrago con su amigo el loro. Ellos estaban...

y si pongo el ancho de 100px.

me la partida:

habia una vez, en
aquella isla pequeñita,
un naufrago con su
amigo el loro. Ellos
estaban...

Bueno si es asi ya entendi =D Gracias.

y otrs cosas, entonces solamente uso el width:XXpx; y <span>

gracias desde ya!! =D

XxflezhaxX · #10 (**permalink**) 19/07/2010, 18:21

ok, hice lo que me pasaste emprear, el texto lo adentr en un tag <pre> y he puesto el code CSS que habia en tu pagina.
Gracias, y por cierto, no tengo una palabra con tantos caracteres, era solo un ejemplo, pero de q da!!
va bien!! ya aprendi algo nuevo =P

emprear · #11 (**permalink**) 19/07/2010, 18:30

XxflezhaxX:

En particular ese código lo tuve que usar justamente porque como en el ejemplo, tenia que escribir una URL muy larga (bueno, no tanto como la del ejemplo... jeje), ademas me parece muy practico porque te ajusta todo.

y lo probé personalmente en todos los navegadores que te indiqué

Saludos

jomaruro · #12 (**permalink**) 24/07/2010, 03:13

Hola:

Si quieres un texto de ejemplo usa Lorem ipsum...

Saludos.