substituindo espaços por & nbsp;
Vamos supor o seguinte elemento (procure pelos espaços à direita e à esquerda):
<code><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> </code>
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:
<code>$('p').text($('p').text().replace(/ /g, ' ')); </code>
Mas escapa do
e se transforma ema mess of entities
.
Obviamente, para tais propósitos, poderíamos usar$('p').html()
:
<code>$('p').html($('p').html().replace(/ /g, ' ')); </code>
Mas este é ainda pior, porque também adiciona
dentro das próprias tags:
<code><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... --> </code>
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