使用 Select2 和 Bootstrap 截断文本

Question

我目前在使用 Select2 与引导程序布局相结合使选择看起来更好（和更多功能）的表单方面遇到问题。

问题是选择的最长元素在被选择后被切断。 虽然这不是选择本身的问题，但它看起来很奇怪（特别是对于短值）并且使用户不必很难检查他们选择的内容。 有关示例，请参见以下屏幕截图。 在这种情况下，用户将无法在不重新打开选择列表的情况下选择 A 或 B 进行检查。

据我所知，这个问题可能是由 Select2 用来做它的事情的顶级span设置的width引起的。 我不确定如何修复它以及这样做的最佳方法是什么。 感觉最好将顶级跨度调大一点，但我不确定如何确定它的设置位置。

另一种方法是将text-overflow属性设置为不为ellipsis 。 但我觉得我错过了一些更明显的东西。 我无法想象这以前不是问题。

我的方法是否合理，或者我是否缺少可以解决此问题的Select2 选项？

MWE 的代码如下，使用 JQuery 1.12 和 Select2 4.0.3。 它也可以作为fiddle 使用。

<html>
<head>
    <link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
    <script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

    <script>
    $(document).ready(function() {
        console.log("JS");
      $("select").select2({});
    });
    </script>
</head>
<body>
    <select id="selection">
      <option>Something</option>
      <option>Something different A</option>
      <option>Something different B</option>
    </select>
</body>
</html>

Answer 1

您还可以像这样在选择 div 中添加填充

 #selection{padding:10px;}

 <html> <head> <link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script> <script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script> <script> $(document).ready(function() { console.log("JS"); $("select").select2({}); }); </script> </head> <body> <select id="selection"> <option>Something</option> <option>Something different A</option> <option>Something different B</option> </select> </body> </html>

Answer 2

尝试这个：

如果您设置min-width那么您将摆脱小文本。

#selection {
  min-width:150px;
}

Answer 3

您可以使用wrapper div包装选择，并为该包装器提供max-width并提供选择width:100% 。

HTML-

<div class="select--wrapper">
  <select id="selection">
      <option>Something</option>
      <option>Something different A</option>
      <option>Something different B</option>
    </select>
</div>

css-

.select--wrapper {
  max-width: 200px;
  width: 100%
}

#selection {
  width: 100%;
}

这是一个工作示例-

 $(document).ready(function() { $("select").select2({}); });

 .select--wrapper { max-width: 200px; width: 100% } #selection { width: 100%; }

 <link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script> <div class="select--wrapper"> <select id="selection"> <option>Something</option> <option>Something different A</option> <option>Something different B</option> </select> </div>

Answer 4

我遇到了同样的问题，经过大量研究，这是自 2012 年以来的一个已知问题，看起来它将在 Select2 4.1.0-beta.0 中得到修复

Github 问题

现在，您可以使用以下 CSS 临时修复它：

.select2-selection--multiple .select2-search--inline .select2-search__field {
       width: auto !important;
}

使用 Select2 和 Bootstrap 截断文本

问题描述

4 个解决方案

解决方案1
4 已采纳 2017-04-18 09:12:27

解决方案2
1 2017-04-18 09:05:27

解决方案3
1 2017-04-18 09:16:25

解决方案4
1 2020-12-11 23:32:41

使用 Select2 和 Bootstrap 截断文本

问题描述

4 个解决方案

解决方案1 4 已采纳 2017-04-18 09:12:27

解决方案2 1 2017-04-18 09:05:27

解决方案3 1 2017-04-18 09:16:25

解决方案4 1 2020-12-11 23:32:41

解决方案1
4 已采纳 2017-04-18 09:12:27

解决方案2
1 2017-04-18 09:05:27

解决方案3
1 2017-04-18 09:16:25

解决方案4
1 2020-12-11 23:32:41