sostituendo gli spazi con & nbsp;

Assumiamo il seguente elemento (cerca gli spazi finali e iniziali):

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Voglio sostituire tutti gli spazi con   , a causa della display: inline-block comportamento strano del display: inline-block mostrato qui: http://jsfiddle.net/SQuUZ/ (non so su tutti i browser, ma i più recenti Chrome e Firefox funzionano entrambi allo stesso modo).

Ora, dal momento che javascript è un’opzione, così jQuery, potrei:

 $('p').text($('p').text().replace(/ /g, ' ')); 

Ma sfugge al   e si trasforma in a mess of entities .

Ovviamente, per tali scopi potremmo usare $('p').html() :

 $('p').html($('p').html().replace(/ /g, ' ')); 

Ma questo è anche peggio, perché aggiunge anche   all’interno dei tag stessi:

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

E rompe tutto …

Gli appunti:

  • Non ci saranno solo elementi con elementi di class all’interno del contenitore (che potrebbe anche non essere sempre

    ).

  • Le espressioni regolari lente sono un’opzione (il problema è che non riesco a inventarne uno …).

Che opzioni ho qui?

Aggiornare:

In effetti, qualcuno potrebbe spiegare perché c’è un tale bug con quella visualizzazione multi linea / riga singola display: inline-block; ? (Vedi il collegamento del violino sopra, ed esaminare …)

Domanda migrata per la visualizzazione: blocco in linea; comportamento di spaziatura strano

 $('p').contents().filter(function(){ return this.nodeType == 3 // Text node }).each(function(){ this.data = this.data.replace(/ /g, '\u00a0'); }); 

DEMO

Anche se il jQuery è davvero eccezionale e fa tutto , anche i CSS potrebbero funzionare in alcuni casi:

 white-space: pre-wrap; 

Demo .

CSS3 correlati: text-space-collapse

qualcuno potrebbe spiegare perché c’è un tale errore con quella visualizzazione multi linea / linea singola: blocco in linea ;? (Vedi il collegamento del violino sopra, ed esaminare …)

Prendere in considerazione:

 

lorem ​​​​​​​​​​​​​​​​​​ipsum

Il carattere dello spazio si trova all’interno del contenitore della casella di linea creato dalla display:inline-block . CSS 2.1 16.6.1 descrive come devono essere elaborati gli spazi in una casella di riga:

Dato che ogni linea è tracciata … [i] fa spazio (U + 0020) alla fine di una riga ha ‘spazio bianco’ impostato su ‘normale’, ‘orrore’ o ‘pre-linea’, è … rimosso .

Poiché lo spazio si trova alla fine della linea all’interno del blocco in linea, viene rimosso.

Contrasto:

 

lorem ipsum

In questo caso, lo spazio non viene rimosso, poiché si trova tra due elementi a livello di riga che costituiscono una casella a riga singola.

puoi usare l’elemento

 

per rendere gli spazi visibili. È una soluzione rapida se vuoi visualizzare visivamente, diciamo, ascii art.