如何在选择框内的选项中换行？你可以看到下面的图片
<div class=" assignment">
<div style="display: flex;">
<i class="fa fa-cube"></i> <strong>Dropdown</strong>
<select id="" class="" style="/* width: 50%; */overflow: hidden; overflow-wrap: break-word; width: 100%;">
<option id="default" value="">Select PickUp Point</option>
<option value="B-01-62,Room - Bereich IT Site Service,Mooswaldallee 1, FREIBURG, , 79090, Pickup Timings - Mo-Fr: 09:00-12:00 and 13:00-16:00" ;">Bccnew-01-62,Room - Bereich coupan Site university,Mooswalgfr ghytdallee 1, FREIBBNHRYURG, , 7900090, Pickup Timings - Mo-Fr: 09:00-12:00 and 13:00-16:00</option>
</select>
<span> </span> <br> <br> <button id="digitalDeliverybtn" class="button pull-right">Submit</button>
</div>
</div>
2条答案
按热度按时间flvlnr441#
您可以模拟选择框并按所需方式设置其样式。
第一个
ctehm74n2#
您无法直接在选取方块选项中换行文字。不过，您可以使用CSS和JavaScript的组合来仿真这种效果。
首先，您需要设置选择框的宽度：
<select style="width:200px;">然后，您需要将样式套用至选项，以便文字换行：
<option style="white-space:normal;">最后，您需要使用JavaScript来检测何时选择了选项，并根据文本的长度动态调整选择框的宽度：
$('select').on('change', function(){ $(this).css('width', this.value.length * 10); });