CSS span non completamente avvolgente

Sto riscontrando alcuni problemi con il wrapping di una nuova riga quando raggiunge la larghezza massima. Ho il mio blog impostato visualizzando tutti i tag in un singolo div e quando la prima riga raggiunge la larghezza massima il tag successivo dovrebbe passare alla riga successiva. (In allegato è ciò che sta accadendo in Chrome e Firefox)CSS span non completamente avvolgente

http://jsfiddle.net/QHWNF/7/

ecco il codice CSS:

p.tagHolder{ 
margin-bottom:5px; 
line-height:25px;}

Tutto il codice HTML/PHP è,

<a href="#"><span>TagName</span></a><a href="#"><span>TagName2</span></a>....

Chrome Firefox

fonte

2012-08-28 Zach Case

Forse si potrebbe creare un violino minima (jsfiddle.net) questo mostra il problema Lì puoi persino includere la tua immagine. –

http://jsfiddle.net/QHWNF/7/ –

Provate a impostare i vostri spans a display: inline-block.

http://jsfiddle.net/QHWNF/10/

fonte

2012-08-28 20:23:51 Nate

Nate grazie! Ha funzionato come un fascino. –

Felice di averlo aiutato! – Nate

@ Krewe - ottimo questo ha funzionato, questo è quello che stavo pensando - ho detto che avrei avvolto il '' attorno allo '' piuttosto che il contrario, dando 'Test' - dal mio punto di vista: ecco una cosa che è un tag e questo tag si collega a (qualcosa). –

Aggiungi word-wrap: normal; e word-break: normal; al tuo contenitore span e p. Questo assicurerebbe che le parole siano rotte solo a break-point consentiti quando c'è bisogno di avvolgere.

Spero che abbia aiutato!

fonte

2012-08-28 20:16:12 Chris

per Chrome e Firefox uso word-break: break-parola e per IE usano -ms-word-break: keep-tutto

fonte

2016-03-17 11:30:03

CSS span non completamente avvolgente

risposta

Problemi correlati