web-dev-qa-db-fra.com

remplacer les espaces par nbsp;

Supposons l'élément suivant (recherchez les espaces de fin et de début):

<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>

Je veux remplacer tous les espaces par &nbsp;, En raison de display: inline-block Comportement étrange montré ici: http://jsfiddle.net/SQuUZ/ (ne sais pas pour tous les navigateurs, mais le dernier Chrome et Firefox agissent tous les deux de la même manière).

Maintenant, comme javascript est une option ici, tout comme jQuery, je pourrais:

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

Mais il échappe au &nbsp; Et se transforme en a&nbsp;mess&nbsp;of&nbsp;entities.

De toute évidence, à de telles fins, nous pourrions utiliser $('p').html():

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

Mais celui-ci est encore pire, car il ajoute également &nbsp; Dans les balises elles-mêmes:

<p>
    <span&nbsp;class="item">Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;</span><span&nbsp;class="item">of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting</span><span&nbsp;class="item">&nbsp;industry.</span>
</p>

<!-- TL;DR -->
<span&nbsp;class="item"></span> <!-- is actually invalid... -->

Et ça casse tout ...

Remarques:

  • Il n'y aura pas seulement des éléments <span> Avec la classe item à l'intérieur du conteneur (qui peut aussi ne pas toujours être <p>).
  • Les expressions régulières lentes sont une option (le problème est que je ne peux pas en trouver une ...).

Quelles options ai-je ici?

Mise à jour:

En fait, est-ce que quelqu'un pourrait expliquer pourquoi il y a un tel bug avec ce multi-ligne/simple ligne display: inline-block;? (Voir le lien du violon ci-dessus et examinez ...)

Question migrée vers affichage: bloc en ligne; comportement d'espacement étrange

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

[~ # ~] démo [~ # ~]

40
gdoron

Même si jQuery est vraiment génial et fait tout, CSS pourrait également fonctionner dans certains cas:

white-space: pre-wrap;

Démo.

Lié à CSS3: text-space-collapse

19
Qtax

quelqu'un pourrait-il expliquer pourquoi il y a un tel bug avec cet affichage multi-ligne/mono-ligne: bloc en ligne ;? (Voir le lien du violon ci-dessus et examinez ...)

Considérer:

​<p><span style="display:inline-block">lorem </span>​​​​​​​​​​​​​​​​​​<span>ipsum</span></p>

Le caractère espace est à l'intérieur du conteneur de zone de ligne créé par display:inline-block. CSS 2.1 16.6.1 décrit comment les espaces dans une boîte de ligne doivent être traités:

Comme chaque ligne est disposée… [i] un espace (U + 0020) à la fin d'une ligne a un "espace blanc" réglé sur "normal", "nowrap" ou "pré-ligne", il est… supprimé .

Comme l'espace se trouve à la fin de la ligne à l'intérieur du bloc en ligne, il est supprimé.

Contraste:

<p><span style="display:inline-block">lorem</span> <span>ipsum</span></p>​

Dans ce cas, l'espace n'est pas supprimé, car il se trouve entre deux éléments de niveau en ligne qui composent une zone de ligne unique.

3
Benjamin Hawkes-Lewis

vous pouvez utiliser le <pre> </pre> élément pour rendre les espaces visibles. C'est une solution rapide si vous souhaitez afficher visuellement, disons, l'art ascii.

1
user1534664