Browse Source

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 năm trước cách đây
mục cha
commit
473267404a
3 tập tin đã thay đổi với 6 bổ sung3 xóa
  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; }

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 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;
   }
 }
 

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác