select要素、option要素への３点リーダー

Question

ご質問失礼いたします。
テキストなどがある要素の横幅に収まらない場合、下記のように書くことで改行を禁止し、３点リーダー（...）を最後に持たせる事ができるかと想うのですが
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

これをセレクト要素のオプション要素（各項目）にもたせられたらと思っております。Android端末からセレクト要素をセレクトするさいに改行されているのを３点リーダーにしたいのですが、どうもセレクト要素に反映させるのは困難なようでして、しかも端末ごとにセレクトする際のUIというんですかね、そちらも異なるのでそもそもできるのかなと言ったところなのですが、、
なにか手がかりなど些細なことでも構いませんのでアドバイスなどいただけたらと思います。よろしくお願いいたします。

Comments

[namnium1125]

オプション要素に指定するテキストはどのように設定しているのでしょうか？そこを工夫するという手もあります。(訳 : htmlや、あればjsも追記していただけると幸いです。m(_ _)m) また追記の際はコードをバッククォート3つ```で囲むか、<code>をクリックして現れるバッククォート内に書くとマークダウンが適用されて表示が綺麗です。

Answer 1

CSSでは難しいと思います。自分なら、はみ出ることがわかっているのであれば、適当なところでテキストを切って...を入れます。

どんなものを作ろうとしているのかわかりませんが、selectはユーザーに選択させる要素ですので、途中で省略された情報を元に何かを判断させるのは不親切な感じがします。selectに入りきらない長さのテキストを読ませる必要があるのであれば、selectではなくそれぞれの文章を表示した上で、<input type="radio">などを横につけるなりするのはいかがでしょうか。