web-dev-qa-db-ja.com

HTML文字-見えないスペース

ダルトンというウェブサイトがあります帝国。

ユーザーが「DaltonEmpire」をコピーしたら、「DaltonEmpire」をクリップボードに追加したいと思います。

私は1つの解決策にたどり着きました。スペースを使用しますが、letter-spacing-18pxにします。このためのHTML文字などのきちんとした解決策はありませんか？

私の例 JSFiddle とコード：

span.nospace {
  letter-spacing: -18px;
}
<ol>
  <li>Dalton<b>Empire</b></li>
  <li>Dalton&zwnj;<b>Empire</b></li>
  <li>Dalton&zwj;<b>Empire</b></li>
  <li>Dalton&#8203;<b>Empire</b></li>
  <li>Dalton<span class="nospace"> </span><b>Empire</b> <i>The only one that works</i>
  </li>
</ol>
htmlcsshiddenspace
7
Isaiah

これにはWord-spacingを使用できます。ただし、より動的なプロパティを作成するには、emユニットを使用します。このように、単位はフォントサイズに基づいているため、実際にはすべてのフォントファミリおよびフォントサイズをサポートします。

ol li
{
    Word-spacing: -.2em;
}

emは絶対単位ではなく、現在選択されているフォントサイズを基準にした単位です。

ソース： なぜpxの代わりにem？

jsFiddle

6
nkmol

あなたはこのようなものを探していますか：

HTMLスペース：&nbsp;？

8
user3096206

font-size: 0;demo を使用することもできます

span.nospace {
        font-size: 0;
    }
5
Bhojendra Rauniyar

ここにいくつかの興味深い関連情報があります。それはあなたの問題を解決しませんが、私がそうであったように、それはオプションの改行を作成する方法を探している人々を助けるかもしれません。ゼロ幅スペース&#8203;および<wbr>要素は2つの可能なオプションです。

5
skibulk

これはどう？私には十分きれいに見えます：

ol li{
    Word-spacing: -4px; /* just enter an appropriate amount here */
}

これで、nospaceスパンを削除できます。

1
AVAVT

margin-leftまたはFont-sizeCSSプロパティを指定できます

[〜＃〜]デモ[〜＃〜]

span.nospace {

    margin-left: -4px; /* or font-size:0px */
}
0
Manoj