選択リストのオプションを折り返したりインデントしたりできますか?

選択リストのオプションでテキストを折り曲げたりインデントしたりできますか?

長いオプション値を含む選択リストを作成すると、書式設定の問題が発生する可能性があります。残念ながら、標準の HTML タグでは、テキストの折り返しやインデントはできません。

カスタム ソリューション

折り返しとインデントを実現するには、カスタム ソリューションの実装を検討できます。ネイティブの を使用する代わりに、タグを使用して、JavaScript またはメニュー プラグインを通じてカスタム ドロップダウン メニューを作成します。

このアプローチでは、テキストの書式設定に柔軟性があり、さまざまなオプションに対応する動的な調整が可能です。

例:

<div>
<pre class="brush:php;toolbar:false">const menu = document.getElementById('my-menu');

// Apply custom formatting to long options
menu.querySelectorAll('li').forEach(option => {
  if (option.offsetWidth > menu.offsetWidth) {
    option.style.whiteSpace = 'nowrap';
    option.style.marginLeft = '1em';
  }
});

代替手段

カスタム ソリューションの実装が実行できない場合は、別のアプローチには、長いオプション値をトリミングすることが含まれます。ただし、これによって常に望ましい視覚効果が得られるとは限りません。