32

次の要素を想定してみましょう (末尾と先頭のスペースを探します)。

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

http://jsfiddle.net/SQuUZ/に示されている奇妙な動作&nbsp;のため、すべてのスペースを に置き換えたい(すべてのブラウザーについてはわかりませんが、最新の Chrome と Firefox はどちらも同じように動作します)。display: inline-block

さて、ここではjavascriptがオプションであるため、jQueryもそうです。

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

しかし、それは をエスケープし、&nbsp;になりますa&nbsp;mess&nbsp;of&nbsp;entities。

明らかに、そのような目的のために以下を使用できます$('p').html():

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

しかし、これはさらに悪いことです。なぜなら、&nbsp;タグ自体にも追加されるからです:

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

そしてそれはすべてを壊します...

ノート：

  • <span>コンテナ内に class を持つ要素だけが存在するわけではitemありません (これも必ずしもそうであるとは限りません<p>)。
  • 遅い正規表現はオプションです (問題は、正規表現を思いつかないことです...)。

ここにはどのようなオプションがありますか?

アップデート：

実際、その multi-line / single-line になぜそのようなバグがあるのか​​ 誰でも説明できdisplay: inline-block;ますか? （上記のフィドルリンクを参照して、調べてください...）

質問は表示に移行されました: inline-block; 奇妙なスペーシング動作

4

4 に答える 4

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

デモ

于 2012-05-06T20:46:49.227 に答える
26

jQueryは本当に素晴らしく、すべてのことを行いますが、場合によっては CSS も機能します。

white-space: pre-wrap;

デモ。

CSS3 関連:text-space-collapse

于 2012-05-06T22:07:08.310 に答える
3

その複数行/単一行表示にそのようなバグがある理由を誰かが説明できますか: inline-block;? （上記のフィドルリンクを参照して、調べてください...）

検討：

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

スペース文字は、 によって作成されたライン ボックス コンテナ内display:inline-blockにあります。CSS 2.1 16.6.1では、ライン ボックス内のスペースを処理する方法について説明しています。

各行がレイアウトされると、行末の [i]fa スペース (U+0020) の「空白」が「通常」、「nowrap」、または「行前」に設定され、… 削除されます.

スペースはインライン ブロック内の行末にあるため、削除されます。

対比：

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

この場合、空白は 1 つの行ボックスを構成する 2 つのインライン レベル要素の間にあるため、削除されません。

于 2012-05-06T22:42:25.927 に答える
2

you can use the <pre> </pre> element to make spaces visible. Its a fast solution if you want to visually display, lets say, ascii art.

于 2013-01-07T01:49:02.047 に答える