如何在select框的option标签内实现文本换行？

原生HTML的select与option元素对换行的支持存在局限，可通过以下两种方式实现需求：

方法一：换行字符+CSS样式 #

在option文本中插入HTML换行实体
（JavaScript场景下可用\n），同时给option设置white-space: pre-wrap样式，让浏览器识别并渲染换行。

示例代码：

<div class="assignment">
    <div style="display: flex;">
        <i class="fa fa-cube"></i>&nbsp;&nbsp;&nbsp;<strong>Dropdown</strong>
        <select id="" class="" style="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" style="white-space: pre-wrap;">Bccnew-01-62,Room - Bereich coupan Site university&#10;Mooswalgfr ghytdallee 1, FREIBBNHRYURG, , 7900090&#10;Pickup Timings - Mo-Fr: 09:00-12:00 and 13:00-16:00</option>
        </select>
        <span>&nbsp;</span> <br> <br> <button id="digitalDeliverybtn" class="button pull-right">Submit</button>
    </div>
</div>

说明：
是换行的HTML实体，white-space: pre-wrap会保留换行符，同时允许内容超出宽度时自动换行。

方法二：自定义下拉组件（推荐） #

原生select的样式兼容性差，不同浏览器对option的样式支持不一致。如果需要更灵活的换行与样式控制，建议用HTML+CSS模拟下拉菜单，或使用成熟UI组件（如Bootstrap Dropdown、Element UI Select等）。

示例（纯CSS模拟简易下拉）：

<div class="custom-dropdown">
    <div class="dropdown-trigger">Select PickUp Point</div>
    <div class="dropdown-menu">
        <div class="dropdown-option">Select PickUp Point</div>
        <div class="dropdown-option">
            Bccnew-01-62,Room - Bereich coupan Site university<br>
            Mooswalgfr ghytdallee 1, FREIBBNHRYURG, , 7900090<br>
            Pickup Timings - Mo-Fr: 09:00-12:00 and 13:00-16:00
        </div>
    </div>
</div>

<style>
.custom-dropdown {
    position: relative;
    width: 100%;
}
.dropdown-trigger {
    padding: 8px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    display: none;
}
.custom-dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-option {
    padding: 8px;
    cursor: pointer;
    white-space: pre-wrap;
}
.dropdown-option:hover {
    background-color: #f0f0f0;
}
</style>

这种方式可完全自定义样式，换行可直接用<br>标签，或依靠CSS自动换行，兼容性与可控性更强。

注意事项 #

• 原生select的overflow-wrap等属性对option无效，必须设置option的white-space属性。
• 旧版IE等浏览器对option的样式支持有限，自定义组件是更稳妥的选择。

内容的提问来源于stack exchange，提问作者Prerana pandey