使用 Select2 和 Bootstrap 截取文本

Posted

技术标签:

【中文标题】使用 Select2 和 Bootstrap 截取文本【英文标题】:Text cut-off with Select2 and Bootstrap 【发布时间】:2017-09-14 00:45:48 【问题描述】:

我目前遇到了一个表单问题,该表单使用 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>

【问题讨论】:

您可以使用 !important 覆盖插件设置的宽度,并为该***跨度设置最小宽度,在 Firefox 上,它显示所有文本,没有省略号,仅在 chrome 上。 【参考方案1】:

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

#selectionpadding: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>

【讨论】:

虽然这有效,但我真的不明白为什么。我猜 Select2 在基本选择列表上进行了某种测量。在 DOM 中,我怀疑具有“错误”尺寸的元素会根据选择上的填充进行调整,而它是相邻元素。【参考方案2】:

试试这个:

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

#selection 
  min-width:150px;

【讨论】:

我不太明白你所说的“摆脱”是什么意思,但这种方法很有效,从目前的答案来看,他最容易理解。虽然它实际上与 v-stackOverFollower 中的“问题”相同。【参考方案3】:

您可以使用wrapper div 包装 select,并为该 wrapper 提供 ma​​x-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>

【讨论】:

与为选择设置min-width 的方法相比,这样做有优势吗? 它将帮助您进行响应式设计(手机、平板电脑、桌面兼容)。因为您不必一次又一次地为您的选择定义宽度。 哦,这是一个很好的观点,但是对于你的设计,无论如何我都必须改变它,对吧?目前,您将 select--wrapper 设置为 200 像素的固定大小。因为它总是 100% 宽,最多 200px,它总是 200px 宽。至少在我有限的测试中似乎确实如此。由于我不必真正关注响应能力,因此我可能会使用min-width 方法。【参考方案4】:

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

Github issue

目前,您可以使用以下 CSS 临时修复它:

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

【讨论】:

以上是关于使用 Select2 和 Bootstrap 截取文本的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 和 Select2 表单验证

使用`jQuery验证`和`Select2`根据`bootstrap4`显示和隐藏成功和错误[重复]

Select2 v4 和 Bootstrap v4 - 缺少下拉菜单

Select2 在 Bootstrap 模式中选择

Bootstrap 4 的错误样式 Select2

无法在 Bootstrap 的 select2 插件中设置选定值