如何使用非常长的文本限制选项宽度

Question

我试过但是当文字很长时我无法控制选项宽度。如何限制选项的宽度或至少与选择相同。 使用bootstrap和asp.net mvc

http://i.stack.imgur.com/cAQta.png

css如下

input,
select,
textarea {
    max-width: 280px;
}

select{
    width:200px
}

代码只是正常的mvc

<div class="form-group">
            @Html.LabelFor(model => model.UserInfoId, "Choose Masseur", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("UserInfoId", null, "No preference", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserInfoId, "", new { @class = "text-danger" })
            </div>
        </div>

html生成如下

<div class="form-group">
            <label class="control-label col-md-2" for="UserInfoId">Choose Masseur</label>
            <div class="col-md-10">
                <select class="form-control" id="UserInfoId" name="UserInfoId"><option value="">No preference</option>
<option selected="selected" value="2">Lisa lee : Although she looks young, but Lisa is very experienced in curing massage, slim down massage and ease insomnia problem. She is working from 9pm to 9am (night shift), better place an online booking or call 65547388 for a booking, she is always fully booked every day.</option>
<option value="3">Wendy lee : Wendy is from Vietnam,experienced, very kind and nice to talk, she can speak in Chinese and English. Off on Saturday.    </option>
</select>
                <span class="field-validation-valid text-danger" data-    valmsg-for="UserInfoId" data-valmsg-replace="true"></span>
            </div>
            </div>

Answer 1

您可以通过定位目标选择标记来更改宽度。

select{
    width:200px
}

编辑：显然，您只能在某些浏览器中设置<option>标记的宽度。每个浏览器的反应都不同。例如，在Firefox中，您可以看到正确设置选项宽度。

您可能希望在将文本添加为​​选项标记之前尝试截断该文本。使用javascript或服务器端。希望这有帮助！

Answer 2

可能有助于解决您的问题

<div class="form-group">
            <label class="control-label col-md-2" for="UserInfoId">Choose Masseur</label>
            <div class="col-md-10">
                <select class="form-control" id="UserInfoId" name="UserInfoId" multiple="multiple" style="font-size:large"  >
<option value="">No preference</option>
<option selected="selected" value="2">Lisa lee : Although she looks young, but Lisa is very experienced in curing massage, slim down massage and ease insomnia problem. She is working from 9pm to 9am (night shift), better place an online booking or call 65547388 for a booking, she is always fully booked every day.</option>
<option value="3">Wendy lee : Wendy is from Vietnam,experienced, very kind and nice to talk, she can speak in Chinese and English. Off on Saturday.    </option>
</select>