Los elementos con Nowrap se atascan a los elementos adyacentes en WebKit
https://stackoverflow.com/questions/2392344
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
tengo un ul Lista que muestro como un menú horizontal. Quisiera el contenido de cada li permanecer en una línea, pero todo li elementos para saltar líneas según sea necesario. Algo como:
First entry in the menu Second menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter] [And more] [Some more]
Lógicamente, acababa de poner li {white-space:nowrap;}, pero hay un problema con los navegadores WebKit. Los elementos con Nowrap se atascan a los artículos adyacentes. Entonces, en el caso anterior, todos los li estará en la misma línea.
Lo mismo ocurre con un elemento aislado con nowrap Dentro de un bloque de texto de envoltura.
<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog
(Romanian)</a>.
Lo que esperaría es algo como:
Visita mis sitios Gabriel Radic .com o
Blog de Timbru
En cambio, los dos enlaces terminan pegados juntos, como:
Visita mis sitios
Gabriel Radic .com o Blog de Timbru (rumano)
¿Hay una buena manera de decirle a Safari, Chrome y otros que dejen de agarrar los codos de las personas?
Gracias por tu ayuda.
Solución
En lugar de usar white-space:nowrap, en este caso, es más apropiado ir display:inline-block.
El CSS debe adaptarse aquí y allá para el cambio, pero funciona como se esperaba.
Otros consejos
Entonces, si lo entiendo correctamente, desea que el texto dentro de los elementos de la lista envuelva, pero no el menú en sí, ¿es así? para que se vea como:
item one | item two | item number | item four
three
Pero no tengo que parezca:
item one | item two | item number three |
item four
Si ese es el caso, ¿ha intentado establecer el nowrap en lo real ul en lugar de en los elementos de la lista, ya que es el ul ¿Que estás tratando de hacer no envolver? Luego establezca un ancho para los elementos de la lista para que se envuelvan para adaptarse a ese ancho.
