substituindo espaços por & nbsp;
Vamos supor o seguinte elemento (procure pelos espaços à direita e à esquerda):
<p>
<span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>
Eu quero substituir todos os espaços com , devido adisplay: inline-block comportamento estranho mostrado aqui:http://jsfiddle.net/SQuUZ/ (não sei sobre todos os navegadores, mas os últimos Chrome e Firefox agem da mesma forma).
Agora, desde que o javascript é uma opção aqui, então é jQuery, eu poderia:
$('p').text($('p').text().replace(/ /g, ' '));
Mas escapa do e se transforma ema mess of entities.
Obviamente, para tais propósitos, poderíamos usar$('p').html():
$('p').html($('p').html().replace(/ /g, ' '));
Mas este é ainda pior, porque também adiciona dentro das próprias tags:
<p>
<span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>
<!-- TL;DR -->
<span class="item"></span> <!-- is actually invalid... -->
E isso quebra tudo ...
Notas:Não haverá apenas<span> elementos com classeitem dentro do recipiente (que também pode não ser sempre<p>).Expressões regulares lentas são uma opção (o problema é que não consigo criar uma ...).Quais opções eu tenho aqui?
Atualizar:Na verdade, alguém poderia explicar por que existe tal bug com aquela linha multi-linha / únicadisplay: inline-block;? (Veja link de violino acima e examine ...)
Pergunta migrada paradisplay: bloco inline; comportamento de espaçamento estranho