HTML 選択要素のオプション テキストの前にスペース文字を入れるにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/25752

  •  09-06-2019
  •  | 
  •  

質問

ドロップダウン リストでは、リスト内のオプションの前にスペースを追加する必要があります。やっています

<select>
<option>&#32;&#32;Sample</option>
</select>

スペースを 2 つ追加しますが、スペースは表示されません。オプションテキストの前にスペースを追加するにはどうすればよいですか?

役に立ちましたか?

解決

そうじゃない &#160 宇宙の実体?

<select>
<option>&#160;option 1</option>
<option>    option 2</option>
</select>

私にとってはうまくいきます...

編集:

これを確認してみたところ、そこにありました 5月 古いブラウザではこれとの互換性の問題がありますが、ここではすべて問題なく動作しているようです。と交換したいかもしれないので、お知らせしたほうがいいと思いました。 &nbsp;

他のヒント

あなたが欲しいと思います &nbsp; または &#160;

したがって、あなたの例の修正バージョンは次のようになります...

<select>
  <option>&nbsp;&nbsp;Sample</option>
</select>

または

<select>
  <option>&#160;&#160;Sample</option>
</select>

使用 \xA0 文字列付き。これは、C# モデル データをドロップダウンにバインドするときに完璧に機能します...

  SectionsList.ForEach(p => { p.Text = "\xA0\xA0Section: " + p.Text; });

Rob Cooper 氏が指摘したように、古いブラウザーには互換性の問題がいくつかあります (IE6 では実際の文字「 」が表示されます)。

これは、ASP.Net でこれを回避する方法です (VS を開いていないため、これが実際にどの文字に変換されるかはわかりません)。

Server.HtmlDecode("&nbsp;") 

いくつかのことを試しましたが、私にとってうまくいったのはJavaScriptを使用することだけでした。js はエンティティについて何も知らないので、HTML エンティティではなくスペースに Unicode コードを使用していることに注意してください。

$("#project_product_parent_id option").each(function(i,option){
  $option = $(option);
  $option.text($option.text().replace(/─/g,'\u00A0\u00A0\u00A0'))
});

alt+space (Mac の場合) を押して、改行しないスペースを入力することもできます。Drupal は HTML エンティティをデコードするため、Drupal モジュールにこれを使用します。

CSS パディングでもこれを達成できるとほぼ確信しています。そうすれば、すべてのファイルにスペース文字がハードコーディングされることはなくなります。 <option> タグ。

@ブライアン

CSS パディングでもこれを達成できるとほぼ確信しています。そうすれば、すべてのタグにスペース文字がハードコーディングされることはなくなります。

良い考えですが、残念ながら (誰もがよく使うブラウザ...) IE7 では動作しません :-(

以下は Firefox で動作するコードです (Op/Saf を想定しています)。

<select>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
            <option style="padding-left: 10px;">Blah</option>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
</select>

char 255 (タイプ オルタナティブ+2+5+5 テンキーパッド上) のような等幅フォントを使用 Courier New.

Server.HtmlDecode("&nbsp;") 私のために働いたのは唯一のものです。

それ以外の場合、chr はテキストとして出力されます。

listitem の属性としてパディングを追加しようとしましたが、影響はありませんでした。

&nbsp;

それを試してみてもらえますか?それとも同じですか?

私も同じ問題を抱えていたので、できるだけ早くこれを修正する必要がありました。何度もグーグル検索しましたが、すぐに解決策を見つけることができませんでした。

代わりに私は独自の解決策を使用しましたが、それが適切かどうかはわかりませんが、私の場合はうまくいき、まさに私が行う必要があったものでした。

したがって、ドロップダウンに ListItem を追加し、スペースを追加したい場合は、次を使用します。

プレス オルタナティブ そして入力してください 0160 テンキー上では次のようになります。 ALT+0160. 。スペースが追加されます。

ListItem("ALT+0160 ALT+0160 TEST", "TESTVAL")

これらの例をいくつか試してみましたが、うまくいったのは、dabobert のものとよく似た JavaScript を使用することだけでしたが、jQuery は使用せず、ごく普通のバニラ JavaScript とスペースを使用しただけでした。

for(var x = 0; x < dd.options.length; x++)
{
    item = dd.options[x];
    //if a line that needs indenting
    item.text = '     ' + item.text; //indent
}

これはIEのみです。実はIE11。うーん。

1.商品一覧へ戻る

2.リスト内のForeachループ

3..

foreach (var item in q)
{
    StringWriter myWriter = new StringWriter();

    myWriter.Lable = HttpUtility.HtmlDecode(item.Label.Replace(" ", "&nbsp;"));
}

これは私にとっての仕事です!

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top