Hướng dẫn css select option break line - css chọn dòng ngắt tùy chọn

Tôi có thể có một văn bản hai dòng trong tùy chọn Chọn HTML không? Làm sao?

rtruszk

3,89413 Huy hiệu vàng36 Huy hiệu bạc53 Huy hiệu Đồng13 gold badges36 silver badges53 bronze badges

Hỏi ngày 19 tháng 5 năm 2010 lúc 9:24May 19, 2010 at 9:24

Tôi biết đây là một bài viết cũ hơn, nhưng tôi để lại điều này cho bất kỳ ai khác đến trong tương lai.

Bạn không thể định dạng dòng chia thành một tùy chọn; Tuy nhiên, bạn có thể sử dụng tiêu đề Attibute để cung cấp một chú giải công cụ hỗ trợ chuột để cung cấp thông tin đầy đủ. Sử dụng một mô tả ngắn trong văn bản tùy chọn và cho toàn bộ skinny trong tiêu đề.

  1

Dai

Huy hiệu vàng 134K2525 gold badges235 silver badges342 bronze badges

Đã trả lời ngày 8 tháng 7 năm 2012 lúc 16:08Jul 8, 2012 at 16:08

2

Không, trình duyệt không cung cấp tùy chọn định dạng này.

Bạn có thể có thể giả mạo nó với một số hộp kiểm với

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }

Đã trả lời ngày 19 tháng 5 năm 2010 lúc 9:25May 19, 2010 at 9:25

QuentinentinQuentin

883K121 Huy hiệu vàng1180 Huy hiệu bạc1298 ​​Huy hiệu đồng121 gold badges1180 silver badges1298 bronze badges

0

Làm thế nào về việc đặt văn bản dài vào một

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

Đã trả lời ngày 24 tháng 6 năm 2016 lúc 21:36Jun 24, 2016 at 21:36

joym8joym8joym8

3.7273 huy hiệu vàng45 Huy hiệu bạc87 Huy hiệu đồng3 gold badges45 silver badges87 bronze badges

Một chút hack, nhưng điều này mang lại hiệu quả của một lựa chọn đa dòng, đặt BGColor màu xám cho dòng đa dòng của bạn và nếu bạn chọn bất kỳ văn bản màu xám nào, nó sẽ chọn bản đầu tiên của nhóm. Kinda Clever tôi muốn nói :) Tùy chọn đầu tiên cũng cho thấy cách bạn có thể đặt thẻ tiêu đề cho một tùy chọn.

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }

  Yes
  No
     This is my description for the no option
     This is line 2 for the no option
  Maybe
     This is my description for Maybe option
     This is line 2 for the Maybe option
     This is line 3 for the Maybe option

Brasofilo

25.1K15 Huy hiệu vàng90 Huy hiệu bạc177 Huy hiệu đồng15 gold badges90 silver badges177 bronze badges

Đã trả lời ngày 18 tháng 11 năm 2014 lúc 21:01Nov 18, 2014 at 21:01

Brianbrianbrian

Huy hiệu Huy hiệu Bạc 19111 silver badge2 bronze badges

1

Mã HTML

    
Test of select menu (SelectboxIt plugin)
    
        Option 1
        Option 2
        Option 3
        Option 4
        Option 5
        Option 6
        Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup
        Option 8
        Option 9
        Option 10
    

Mã JavaScript

$(function(){
    $("#testselectset").selectBoxIt({
        theme: "default",
        defaultText: "Make a selection...",
        autoWidth: false
    });
});

Mã CSS

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
    width: 400px; /* Width of the dropdown button */
    border-radius:0;
    max-height:100px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

Và bạn phải thêm một số thư viện jQuery chọn hộp JQuery CSS

JQuery ui min js

SelectBox JS

Vui lòng kiểm tra liên kết này liên kết jsfiddle

Đã trả lời ngày 6 tháng 4 năm 2015 lúc 12:07Apr 6, 2015 at 12:07

ArjunarjunArjun

7951 Huy hiệu vàng7 Huy hiệu bạc18 Huy hiệu đồng1 gold badge7 silver badges18 bronze badges

1

Nếu bạn đang sử dụng select2, bạn có thể dễ dàng xây dựng một cái gì đó để phù hợp với các tùy chọn thả xuống và tùy chọn được chọn bên dưới:

Khi tùy chọn văn bản của bạn được chia bởi function SelectFirst(SelVal) { var arrSelVal = SelVal.split(",") if (arrSelVal.length > 1) { Valuetoselect = arrSelVal[0]; document.getElementById("select1").value = Valuetoselect; } }3

Pacheco|Fmcia Pacheco|11443322551

Sau đó, kịch bản của bạn có thể giống như thế này:

Kết quả bạn có thể thấy dưới đây:

Đã trả lời ngày 1 tháng 2 năm 2020 lúc 21:53Feb 1, 2020 at 21:53

3

Bạn có thể sử dụng phần tử đầu vào bình thường với thuộc tính danh sách, sau đó thêm các tùy chọn có giá trị, giá trị sẽ được hiển thị dưới dạng dòng đầu tiên và văn bản tùy chọn sẽ được hiển thị tự động dòng thứ hai. Tôi tìm thấy giải pháp này, có một cái nhìn, cách này cũng có thể giúp

Customer List
   
   

Nhưng điều này chỉ hoạt động trong Chrome, các trình duyệt khác không hiển thị văn bản giá trị.

Đã trả lời ngày 13 tháng 4 năm 2021 lúc 5:56Apr 13, 2021 at 5:56

Chỉ tạo kiểu cho kiểm soát chọn như thế này:style the select control like this:

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

Result:

Đã trả lời ngày 25 tháng 5 năm 2021 lúc 20:43May 25, 2021 at 20:43

1

Không hoạt động đầy đủ (phần HR Line) trên tất cả các trình duyệt, nhưng đây là giải pháp:hr line part) on all browsers, but here is the solution:

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

Đã trả lời ngày 26 tháng 12 năm 2016 lúc 22:49Dec 26, 2016 at 22:49

Thay vào đó, có thể thử thay thế chọn bằng đánh dấu, ví dụ:

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

Đã trả lời ngày 17 tháng 10 năm 2017 lúc 18:06Oct 17, 2017 at 18:06

RogerrogerrogergerRogerRoger

3863 Huy hiệu bạc9 Huy hiệu Đồng3 silver badges9 bronze badges

1

Ok, tôi đã tìm thấy một giải pháp:

HTML:

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

CSS:

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

jQuery:

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

Đã trả lời ngày 22 tháng 3 năm 2020 lúc 12:36Mar 22, 2020 at 12:36

user3267302user3267302user3267302

1733 Huy hiệu bạc13 Huy hiệu Đồng3 silver badges13 bronze badges

Bạn có thể sử dụng một thư viện có tên SELECT2

Bạn cũng có thể nhìn vào câu hỏi & câu trả lời của Stackoverflow

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

Trong JavaScript

        
            My real option text
               (...and my really really long option text that is basically a continuation of previous option) 
               (...and still continuing my previous option) 
            Another real option text
        

Đã trả lời ngày 23 tháng 5 năm 2020 lúc 18:47May 23, 2020 at 18:47

Một ý tưởng có thể là sử dụng Optgroup. Trong trường hợp của tôi thấy nó tốt hơn cách tiếp cận khuyết tật. Tôi nghĩ rằng nó ít khó hiểu hơn so với việc nhìn thấy tùy chọn bị vô hiệu hóa mà tôi nghĩ.

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }

Một thành phần bên ngoài nghe có vẻ mát mẻ như Vue Chọn, nhưng tôi muốn gắn bó với HTML tự nhiên chọn vào lúc này.

Đã trả lời ngày 10 tháng 12 năm 2020 lúc 15:38Dec 10, 2020 at 15:38

Có, bằng cách sử dụng CSS Styles Space White không gian: Mang trước; Trong lớp .Dropdown của bootstrap bằng cách ghi đè nó. Trước đó nó là không gian trắng: Nowrap; Vì vậy, nó làm cho thả xuống được bọc thành một dòng. Bao bọc trước làm cho nó theo chiều rộng.

Đã trả lời ngày 12 tháng 9 năm 2017 lúc 13:51Sep 12, 2017 at 13:51

AsteriskasteriskisAsterisk

1291 Huy hiệu bạc11 Huy hiệu đồng1 silver badge11 bronze badges

0

Bạn có thể thêm một dòng phá vỡ trong CSS không?

Bạn có thể tạo kiểu chọn tùy chọn?