14

私の問題は、オプションで複数の連続した空白を保持できない HTML ドロップダウン選択から来ています。サンプルのテストケースと結果を次に示します。

"white-space:pre" クラス CSS は、select 要素オプション以外の HTML 要素に対してのみ機能するようです。そのような問題を特定する文献や事例はありますか?

print "<style>.keepwhitespace { white-space: pre }</style>
<p class='keepwhitespace'>abc   def</p>
abc   def
<br/>
<br/>select and options with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'>
<option class='keepwhitespace'>Any </option>
<option class='keepwhitespace'>abc   def </option>
<option class='keepwhitespace'> Any  </option>
<option class='keepwhitespace'>abc def </option>
</select>
<br/>select with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'>
<option >Any </option>
<option >abc   def </option>
<option> Any  </option>
<option>abc def </option>
</select>
<br/>options with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\">
<option class='keepwhitespace'>Any </option>
<option class='keepwhitespace'>abc   def </option>
<option class='keepwhitespace'> Any  </option>
<option class='keepwhitespace'>abc def </option>
</select>";

結果は次のようになります。

「p」要素タグ（および私が使用しようとした他のもので見られるように、「空白」CSSスタイルでテキストを適切にフォーマットすることができましたが、selectはそうではありません.

に見られるように

アイテム値の文字列と文字列の長さを表示するための選択時 (長さは 7 ではなく 10 である必要があり、'abc def' の長さは 8 文字です)

アイテム値の文字列と文字列の長さを表示するための選択時 (長さは 7 ではなく 10 である必要があり、'abc def' の長さは 8 文字です)

4

2 に答える 2

17

フォーム入力は通常、関連するネイティブOSコントロールにマップされるため、スタイルを設定するのが難しい場合があります。空白がsの1つのスペースに折りたたまれないようにするための通常の回避策は、通常のスペースの代わりに<option>使用することです。&nbsp;

例えば。オプションの1つは次のとおりです。

<option>&nbsp;Any&nbsp;&nbsp;</option>

よりカスタムな外観を得るには、実際のselect要素を完全に非表示にして、カスタムマークアップとjavascriptに置き換えます。

于 2012-07-02T12:28:11.997 に答える