1
HTMLとCSSとブートストラップだけを使用しています。私はオプションで非常に長い値を持っていますが、それらをs col-md-6選択ボックスに表示したいと思います。しかし、選択ボックスは適切な方法で来ているが、値は画面から外れています。デスクトップとタブレット用。長いオプション値の場合、ドロップダウンが画面外になります。
私は多くを検索しましたが、これには適切な解決策がありませんでした。
これは私のコードです：
<html>
<head>
<style>
select {
width: 400px;
font-size: xx-large;
}
option {
font-size: xx-large;
padding: .5em;
}
</style>
<title></title>
</head>
<body>
<form>
<div class="row">
<div class="col-md-6">
<label for="id_foo">Foo:</label>
<select name="foo" id="id_foo" style="width:100%">
<option>1dfdsfsdfdsfdfdsfdfdsfddgfgghghghghjhgjhgghkhjkhgkjkeretryw4562456fhgfh</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select><br />
</div>
</div>
<input type="submit" value="Submit" name="submit" id="submit" />
</form>
</body>
</html>
cssプロパティを追加すると、オーバーフロー時に省略記号を表示できます。ワードラップも見ることができますが、オプションテキストは1つの長い単語であるため、機能しません。これを参考にすることができます。https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ – Rajesh
はデスクトップでうまく動作しますが、タブレットとデスクトップで反応します。 –
その長い文章でも機能しません。 –