Foros del Web » Creando para Internet » CSS »

Agrandar span con texto y espacios

Estas en el tema de Agrandar span con texto y espacios en el foro de CSS en Foros del Web. Buenas a todos. Aquí va mi duda: Tengo un span con texto dentro y quiero que tenga un ancho máximo y que el texto se ...
  #1 (permalink)  
Antiguo 18/04/2009, 07:49
 
Fecha de Ingreso: marzo-2007
Mensajes: 28
Antigüedad: 10 años, 9 meses
Puntos: 0
Agrandar span con texto y espacios

Buenas a todos. Aquí va mi duda:

Tengo un span con texto dentro y quiero que tenga un ancho máximo y que el texto se separe en lineas, por palabras.

El caso es que me va bien si utilizo espacios normales como separadores entre palabras pero cuando utilizo el codigo " " en lugar de espacios, ya no me va tan bien... las palabras separadas por " " se muestran en la misma linea y las palabras separadas por " " se muestran en lineas diferentes.

Dejo mi codigo:
<div style="width: 257px;">
<li class="ab">140,00&nbsp;Edafadfadfas dfadxd</li>
</div>
Código CSS:
.ab{
min-width:25%;
max-width:25%;
width:25%;
background-color:#EEEEEE;
font-weight:bold;
overflow:hidden;
line-height: 20px;
float:left;
}

Digamos que tendría que salir:
140,00
Edafadfadfas
dfadxd
y sale:
140,00&nbsp;Edafadfadfas
dfadxd

¿Alguna solución? (No quiero poner overflow:hidden, basta con que la palabra tras nbsp baje de línea??


GRACIAS!!
  #2 (permalink)  
Antiguo 18/04/2009, 11:24
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: Agrandar span con texto y espacios

Hola amigo, te aclaro algunas cosas:

Una etiqueta <span></span> no es una etiqueta <li></li> y lo que tu pones es una etiqueta <li></li>.

Una etiqueta <li></li> va dentro de <ul><li></li></ul>.


La solución a tu problema es variado, yo, te digo el siguiente si no es para mucho texto, por ejemplo una dirección:


<span>primera linea<br />segunda linea<br />tercera linea</span>

Y en el css

span {
background: #99CC33;
display: block;
padding-left: 3%;
}
  #3 (permalink)  
Antiguo 18/04/2009, 13:32
 
Fecha de Ingreso: marzo-2007
Mensajes: 28
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Agrandar span con texto y espacios

Hola talmente, primero de todo gracias por tu respuesta...

Me he equivocado en el código fuente, pero aunque haya puesto un li, lo mismo pasa si pongo un span o un div.

En cuanto a la solución que me propones, es una forma de verlo pero no quiero poner saltos de línea forzados... Debe ser el texto el que se ajuste al ancho del li y que los saltos de línea se pongan automáticamente (que el li se agrande verticalmente).

Lo único que pasa es que si pongo "&nbsp;", los propios caracteres del nbsp cuentan como caracteres visibles y la línea no se "corta". Sin embargo, si pongo " ", la línea si que se corta en el espacio en blanco. Supongo que la única solución es sustituir "&nbsp;" por "", pero siempre he pensado que algunos caracteres no alfanuméricos deben tener su código tipo "&XXX" para seguir los estándares.


gracias.
  #4 (permalink)  
Antiguo 18/04/2009, 14:34
 
Fecha de Ingreso: marzo-2007
Mensajes: 8
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Agrandar span con texto y espacios

Jeje, tal y como te dijeron un br es la solución, o puedes poner <li></li> para cada línea, lo que no entiendo, si no es mucho preguntar, por que quieres cada elemento dentro del <li> en una línea diferente??
  #5 (permalink)  
Antiguo 19/04/2009, 05:52
 
Fecha de Ingreso: marzo-2007
Mensajes: 28
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Agrandar span con texto y espacios

Hola ciberpasta...

No quiero que cada elemento del li sea un elemento en una linea diferente...

Simplemente creo que el li (o span o div o...) debiera tener un ancho máximo y el texto debiera ajustarse a este ancho, de tal forma que creciese verticalmente. Es decir, aquellas palabras que no caben en la linea actual del li deben "bajarse" a las siguientes lineas.

La cuestión es que va bien con los textos con espacios normales pero no con los textos con caracteres "&nbsp;" como espacios.

Creo que la única solución pasa por quitar los "&nbsp;".

gracias.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:38.