35

テキストがあり、最後に2つのアイコンを挿入します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris <img ...><img ...>

2つの画像を結合したままにしておきたいのですが、画像がオーバーフローした場合は両方とも新しい行に移動する必要があるため、必要なのは、&nbsp;幅がゼロのようなものです。

ラッパーを使用せずにこれをアーカイブするためのhtmlエンティティまたは別の方法はありますか?

4

4 に答える 4

59

ノーブレークスペースは、スペースと非常によく似ているのと同じように、単語結合子と非常によく似ています。しかし、それぞれ、非常に異なる使用法があります。これらのバリエーションはすべて、スペース文字のさまざまな幅と機能を表すために存在します。

  • U + 00A0ノーブレークスペース &nbsp;はスペース文字と同様に表され、自動改行を防ぎます。
  • U + 2007図スペース &#8199;は、数字(0〜9)の文字とある程度等しいスペースです。
  • U + 202Fナローノーブレークスペース &#8239;または&nnbsp;)は、単語の境界を示さずに、単語の語幹から接尾辞を区切るために使用されます。フォントによって異なる場合がありますが、通常のスペースの約1/3の代表的なスペースです。
  • U + 2060単語結合子 &#8288;は文字が表示されないため、その位置での改行を禁止します。

その他の途切れのないキャラクター

  • ノンブレイキングハイフン(U + 2011)
  • 図スペース(U + 2007)
  • 狭いノーブレークスペース(U + 202F)
  • チベットマーク区切り文字TSHEGBSTAR(U + 0F0C)

W3Cは、2つの文字または単語を接続して折り返さないようにする必要がある場合は、常にWord-Joinerを使用することをお勧めします。[1]

以前はゼロ幅の非破壊スペースで提供されていた同じ機能を取得するには、代わりにWORD JOINER(U + 2060)を使用する必要があります。

ただし、HTML4文字リファレンスのどこにもWord-Joiner言及されていません。[2]

これらの文字に加えてSOFT HYPHEN (U+00AD)、UAが独自のハイフン辞書にない可能性のある単語内の改行ヒントを提供するために使用できます。

明示的に推奨されていない文字はZERO WIDTH NON-JOINER (U+200C)次のとおりです。他の方法で結紮または筆記体で結合する文字間の結紮および筆記体の接続を防止します。

  • ZERO WIDTH JOINER (U+200D):結紮と筆記体の接続を奨励します。

参照:

  1. W3C Wiki:HTML文字の使用法
  2. HTML4での文字エンティティ参照

さらに遠く:

  1. Unicode.org U +00A0NBSPのWord_Breakプロパティ値の修正
  2. Unicodev.3.2.0改行プロパティ
  3. Unicode?提案?改行プロパティ
  4. Unicodev7完全標準
  5. ユッカ・コルペラによるユニコードの説明
于 2015-02-09T08:55:46.613 に答える
27

HTMLにはZWNBSP(ゼロ幅ノーブレークスペース)のエンティティ参照はありませんが、他のUnicode文字と同様に、文字参照&#xfeff;(または同等に&#65279;)を使用して表現できます。ただし、画像を同じ行に保持するには効果がありません。画像は文字ではなく、文字間で使用する場合でも、ブラウザはZWNBSPのUnicodeセマンティクスを実装する必要はありません。同じことがWORDJOINER、U+2060にも当てはまります。

最も効果的な方法は、imgタグをnobr要素でラップすることです:<nobr><img ...><img ...></nobr>。HTML仕様の一部ではなく、HTML5ドラフトで「廃止」と記載されていますが、このメソッドはブラウザー間で機能します。CSSが無効になっているときに機能しない、より不器用な方法で作業したい場合は、人工的なラッパー要素を使用して設定できますwhite-space: nowrap

于 2012-07-09T11:01:21.263 に答える
14

cssプロパティを使用して画像をスパンでラップしてみてくださいwhite-space: nowrap;

<span style="white-space: nowrap;"><img ...><img ...></span>
于 2012-07-09T09:30:40.050 に答える
1

あなたはこのウェブサイトに行くことができます:シンボル-それは多くの特別なシンボルとキャラクターへの簡単なアクセスを提供します。ページの下部に「ゼロ幅スペース」文字のボタンが表示されます。そのボタンをクリックするだけで、「ゼロ幅スペース」文字がクリップボードにコピーされます。

于 2018-03-13T09:59:02.487 に答える