Ho forse un compito un po 'strano, ma credo che non ci sia una soluzione migliore. Devo avere <ul> in un contenitore la cui larghezza è modificabile e con elementi <li> inarcati di larghezza fissa. Dovrei (e ho già trovato una soluzione) mettere degli spazi tra gli elemme <li> della stessa larghezza. La larghezza degli spazi cambia dinamicamente e dipende dalla larghezza del contenitore dei genitori. Anche in questo caso, gli articoli <li> hanno larghezza fissa.Modo CSS per limitare un'interruzione di riga per il testo
Devo anche posizionare alcuni collegamenti sopra questi elementi descritti. Per alcuni motivi, i collegamenti devono trovarsi nell'altro elemento <ul>. Hanno anche avvolto negli elemeni in linea <li>. E voglio che siano posizionati sopra gli articoli <li> descritti sopra. Questo può essere fatto impostando la larghezza fissa di <li> come sopra. Ora, il problema è che il testo in ogni link ha una larghezza diversa e si divide in due righe, ma devo metterlo in una riga.
Quindi voglio ingannare il browser: il testo traboccherà gli articoli <li>.
.liElem {
width: 100px;
height: 20px;
overflow: visible;
}
Ma, come potete immaginare, il testo si sta spezzando in due linee e traboccante in realtà il fondo di voci di elenco, non il lato destro.
L'effetto desiderato può essere eseguito inserendo di spazi in testo come questo: <li><a href="#">Add to Favourites</a></li>.
Quindi, la mia domanda è questa: come in css-way rendere il testo normale NON dividere in più righe?
hai impostato larghezza: 100px; nel tuo css, quindi se la larghezza della linea è superiore a 100px, il testo verrà diviso in più righe, quindi potresti non aver bisogno di impostare la larghezza. oppure puoi usare white-space: nowrap; proprietà. – Shreedhar
Devo fare in modo che la lista abbia una larghezza fissa. Come ho detto, voglio ingannare il browser, lasciare che pensi che gli elementi di posizione abbiano larghezza fissa. –