浏览代码

Fix CSS text wrapping for single selects

Select2 previously had an issue displaying the text of long values
as it was not correctly wrapping the text.  This was because the
browser did not know that it couldn't wrap at whitespace, which
has been fixed.

Now Select2 should properly display an ellipsis for large text
values instead of overflowing.

This closes https://github.com/select2/select2/issues/2984.
Kevin Brown 10 年之前
父节点
当前提交
473267404a
共有 3 个文件被更改,包括 6 次插入3 次删除
  1. 3 2
      dist/css/select2.css
  2. 0 0
      dist/css/select2.min.css
  3. 3 1
      src/scss/_single.scss

+ 3 - 2
dist/css/select2.css

@@ -13,10 +13,11 @@
     -webkit-user-select: none; }
     .select2-container .select2-selection--single .select2-selection__rendered {
       display: block;
-      overflow: hidden;
       padding-left: 8px;
       padding-right: 20px;
-      text-overflow: ellipsis; }
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
   .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
     padding-right: 8px;
     padding-left: 20px; }

文件差异内容过多而无法显示
+ 0 - 0
dist/css/select2.min.css


+ 3 - 1
src/scss/_single.scss

@@ -11,10 +11,12 @@
 
   .select2-selection__rendered {
     display: block;
-    overflow: hidden;
     padding-left: 8px;
     padding-right: 20px;
+
+    overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 

部分文件因为文件数量过多而无法显示