Elementi con nowrap rimane bloccata a elementi adiacenti in WebKit
Domanda
Ho una lista ul
che visualizzo come un menu orizzontale. Mi piacerebbe che il contenuto di ogni li
di rimanere su una sola riga, ma l'intero voci li
a saltare le linee, se necessario. Qualcosa di simile:
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]
A rigor di logica, avevo appena messo li {white-space:nowrap;}
, ma c'è un problema con i browser WebKit. I prodotti con nowrap rimane bloccata a elementi adiacenti. Quindi, nel caso di cui sopra, tutte le li
sarà sulla stessa linea.
Lo stesso vale per un elemento isolato con nowrap
all'interno di un blocco di testo incarto.
<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>.
Quello che mi aspetto è qualcosa di simile:
Visita il mio sito Gabriel Radic .com o
timbru Blog
Al contrario, i due collegamenti finiscono insieme bloccato, come:
visitare i miei siti
Gabriel Radic .com o timbru Blog (rumeno)
C'è un bel modo per dire a Safari, Chrome e altri di smettere di afferrare i gomiti della gente?
Grazie per l'aiuto.
Soluzione
Invece di usare white-space:nowrap
, in questo caso è più opportuno andare con display:inline-block
.
I bisogni CSS di essere lì adattato qui e per il cambiamento, ma funziona come previsto.
Altri suggerimenti
Quindi, se ho capito bene, si desidera che il testo all'interno delle voci di elenco per avvolgere, ma non il menu stesso, giusto? in modo che sembra qualcosa di simile:
item one | item two | item number | item four
three
Ma non ha apparire come:
item one | item two | item number three |
item four
Se questo è il caso, hai provato l'impostazione della nowrap
sul ul
effettiva trascurando le voci di elenco, dal momento che è l'ul
che si sta tentando di fare va a capo? Quindi impostare una larghezza per le voci di elenco in modo che possano avvolgere per adattarsi che la larghezza.