使用 Select2 和 Bootstrap 进行文本截断

Question

我目前遇到一个问题，该表单使用 Select2 与引导布局相结合，使选择看起来更好（并且更实用）。

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

据我所知，该问题可能是由 Select2 用来执行其操作的顶级

width

上设置的

span

引起的。我不确定如何修复它以及最好的方法是什么。感觉最好让顶层跨度稍微大一点，但我不知道如何弄清楚它的设置位置。

另一种方法是将

text-overflow

属性设置为不是

ellipsis

。但我觉得我错过了一些更明显的东西。我无法想象这以前不是一个问题。

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

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

小提琴使用。

<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 包裹 select

，并给

wrapper 一个 max-width 并给 select 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;
}

Answer 5

我可以直接在你的 select2 的定义中这样做，就像这样：

selection = $('#selection');        
selection.select2({
  width: 'auto !important'
});

Answer 6

这似乎效果最好，因为 select2 使用 Flexbox：

.select2-selection--multiple .select2-search.select2-search--inline {
     flex-grow: 1;
}

使用 Select2 和 Bootstrap 进行文本截断

问题描述投票：0回答：6

6个回答

最新问题

使用 Select2 和 Bootstrap 进行文本截断

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6