将选择框的宽度调整为适应div容器

Question

我已经定义了一个下拉菜单，如下所示：

    <div class="form-group">
        <select class="form-control">
            <option>small option</option>
            <option>mediummmmmmmmmmmmmmmmmmmm option</option>                
            <option>large eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeee eeee option</option>
        </select>
    </div>

我想把标签的宽度设置为容器宽度和文本宽度的最小值。如果文本比容器大，则截断选项的文本并在末尾添加省略号，以使保持在容器内。此外，必须是响应式的，在调整窗口大小时，的宽度应更新以适应新的窗口宽度。 如何使用Bootstrap CSS实现这一目标？

- Mhd

---

请查看此处的已接受答案：https://dev59.com/Tmgv5IYBdhLWcg3wVfZ6 - ceferrari

Answer 1

尝试使用width:100%;

这对于ListView中的每个元素都有效

- Emi

Answer 2

I took this answer from this stackoverflow answer

.dropdown{
 width:150px;
 border: 1px solid #cfcfcf;
 height: auto;
 border-radius: 5px;
 padding:3px 4px 4px;
 position: relative;
 z-index: 0;
 overflow:hidden;
 }

.dropdown select{
 border: none;
 background-color: transparent;
 outline: none;
 padding: 0;
 width:150px;
    /* background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right; */
    /* background-position: 55%; */
 }

/* not 100% sure this next option rule is needed */
.dropdown option {
    width:150px
}

/* this places an arbitrary element inside the dropdown but before it's children elements */
/* We use it to cover half the select box as well as display the custom arrow */

<div class="dropdown">
    <select>
       <option value="">Some Text</option>
        <option value="">Some More Text2</option>
        <option value="">Some More More More Longer Text</option>
    </select>
                                
    </div>

- Steven

---

我不喜欢将宽度硬编码为150像素的想法。而且这也不是响应式的。如果您更改容器宽度，select 的宽度仍然保持不变。 - Mhd

嗯，也许你应该研究一下插件，可以将选择框样式化为你想要的样子：http://selectric.js.org/demo.html - Steven