css 使用Select2和Bootstrap进行文本截断

ds97pgxw 于 2023-03-05 发布在 Bootstrap

关注(0)|答案(5)|浏览(138)

我目前遇到了一个问题，一个表单使用Select2来使一个选择看起来更漂亮（和更功能化），并结合了引导布局。
问题是选择中最长的元素在被选中后会被删除。虽然这不是选择本身的问题，但它看起来很奇怪（特别是短值），让用户很难检查他们选择了什么。请参见下面的屏幕截图。在这种情况下，用户将无法在不重新打开选择列表的情况下检查他选择了A或B。

据我所知，这个问题可能是由Select2使用的顶层span上的width设置引起的。我不确定如何修复它，以及最好的方法是什么。感觉最好是让顶层跨度稍微大一点，但我不确定如何找出它的设置位置。
另一种方法是将text-overflow属性设置为非ellipsis，但我觉得我遗漏了一些更明显的东西，我无法想象这以前不是一个问题。
我的方法合理吗？或者我错过了一个可以解决这个问题的option for 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>

css

来源：https://stackoverflow.com/questions/43467753/text-cut-off-with-select2-and-bootstrap

5条答案

按热度按时间

qxgroojn1#

你也可以像这样在选择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>

赞(0）回复(0）举报 2023-03-05

whitzsjs2#

- 试试这个**

如果设置min-width，则会删除小文本。

#selection {
  min-width:150px;
}

赞(0）回复(0）举报 2023-03-05

vatpfxk53#

您可以用wrapper div** Package *选择，并为该 Package 器提供最大宽度，同时为选择提供width:100%。
超文本标记语言-

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

西-

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

#selection {
  width: 100%;
}

这里有一个例子-
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-03-05

lnlaulya4#

我也遇到过同样的问题，经过大量研究，这是自2012年以来的已知问题，看起来将在Select 2 4.1.0-beta.0中修复
Github issue
现在，您可以使用以下CSS临时修复它：

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

赞(0）回复(0）举报 2023-03-05

7ivaypg95#

我可以直接在select2的定义中执行，如下所示：

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

赞(0）回复(0）举报 2023-03-05

我来回答

css 使用Select2和Bootstrap进行文本截断

5条答案

相关问题

热门标签

最新问答