Bootstrap 3选择选项切断

Posted 2023-03-06

【中文标题】Bootstrap 3选择选项切断

【英文标题】：Bootstrap 3 select options cutting off

【发布时间】：2015-02-10 11:17:32

【问题描述】：

有没有办法防止 Bootstrap 选择上的选项“截止”？请参阅下面的代码和随后的图片。第一张图片显示正确显示的选项。第二张图片显示了我将屏幕宽度调整为小于选项文本后关闭的选项。

如果我不能通过 CSS 做到这一点，如果选项宽度大于选择宽度，我打算使用 jQuery 将选择框的宽度设置为等于最大选项宽度。

<select class="form-control multiple" size="3">
    <option>test123 test123 test123 test123 test123 test123</option>
    <option>test123 test123 test123 test123 test123 test123</option>
</select>

【问题讨论】：

能否包含用于调整选择框大小的相关代码？

我没有调整选择框的大小...我正在调整浏览器窗口的大小...

@ZackMacomber 您可以尝试将“溢出：自动”添加到您的选择元素。可能无法提供您想要的最终解决方案，但它在我的测试中有效。 （铬）

如果您将窗口大小重新调整为小于选项列表宽度，您希望发生什么？越线？在浏览器之外溢出？我的意思是，如果根本没有空间，它就会被切断，没有 css 或 jquery 会改变它。 （没有缩小字体以使其适合）

您可以通过将word-wrap: break-word; 添加到所选类之一来使它们自动换行。这不是完美的解决方案，但它会增加可读性，因为不需要滚动。有趣的是：它似乎与 word-wrap: normal;

【参考方案1】：

我唯一能想到的是，由于 Bootstrap 容器本质上是响应式的，它们会根据浏览器的当前大小自动调整 <input> 的大小。看看这个结构：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <input type="text" class="form-control" value="I am a very, very, very, very, very, very long option. I'm going to extend off the screen."/>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <select class="form-control">
        <option value="1">I am a very, very, very, very, very, very long option. I'm going to extend off the screen.</option>
      </select>
    </div>
  </div>
</div>

在本例中，如果我们将窗口的大小越来越小，<input> 和 <select> 的宽度将调整为它在 <div class="col-xs-12"> 中的容器的大小。为了防止这种情况，我们需要使用固定宽度的输入，这有点不利于使用像 Bootstrap 这样的响应式框架，但我可以看到在某些情况下需要。

需要考虑的一些建议：

是否可以使用更小的选项标签？ 您的<select> 是否在最大宽度容器中？ 如果没有空间，是否可以使用<modal> 来选择您的选项？

如果所有其他方法都失败了，您始终可以创建一个自定义类 <div class="col-xs-12 fixed"> 并将宽度设置为静态值，可以是基值，也可以按照您的建议使用 JQuery 来查找最长选项值的最大宽度。

希望有帮助！