Agrandar span con texto y espacios

[tapion]

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!!

[talmente]

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%;
}

[tapion]

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.

[cyberpasta]

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??

[tapion]

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.