Tùy chọn bọc từ trong danh sách lựa chọn

Question

Có thể bọc các tùy chọn dài trong một danh sách lựa chọn không?

Tôi có danh sách chọn động và một số tùy chọn khá dài. Tôi muốn các tùy chọn quá dài để có thể xếp hàng tiếp theo. Ngoài ra, tôi muốn thụt lề những dòng đó.

Giải pháp của tôi nếu điều này là không thể, chỉ cần cắt kết quả thành n ký tự.

Dưới đây là những gì tôi có:

I'm a short option 
This is a really really really long option 
This one isn't too bad 
But whoa look how long I am! I go on forever! 

Và đây là những gì tôi muốn có:

I'm a short option 
This is a really really 
    really long option 
This one isn't too bad 
But whoa look how long 
    I am! I go on forever! 

Answer 1

bạn không thể làm điều này với một tiêu chuẩn <option> bạn sẽ cần phải cuộn-bạn-của hoặc find a menu plugin

Answer 2

Đây là giải pháp jQuery nhanh chóng và tinh khiết có thể giúp một số. Ngoài việc tạo ra thả xuống của riêng bạn và kéo các giá trị/văn bản từ một lựa chọn ẩn như đã đề cập bởi Scott Evernden. Điều này sẽ cung cấp cho bạn một số phòng để chơi với. Nó không cắt ở giữa một từ nhưng đồng thời nó không quấn văn bản. Nó sẽ đưa văn bản đầy đủ vào tiêu đề để người dùng có thể cuộn lại và xem toàn bộ từ văn bản được bao bọc. Sau đó, nó sẽ sử dụng cài đặt maxChar để đi tới một số ký tự nhất định rồi tìm phần cuối của từ mà nó đang bật để không cắt bỏ từ đó. Min-width của tùy chọn nên giữ cho nó nội tuyến với các lựa chọn nhưng đi trước và chơi với các biến maxChar và nó sẽ giữ cho nó đi ra ngoài giới hạn. Đây là một cách giải quyết ngắn như tôi sẽ trong hầu hết các trường hợp đi với một giải pháp tùy chỉnh nhưng cho danh sách nhanh chóng, nơi người dùng có thể biết những gì họ đang chọn với từ đầu tiên hoặc hai công trình này tuyệt vời. Hy vọng điều này sẽ giúp ai đó:

var optionText, array = [], newString, maxChar = 40; 
$('select').each(function(){ 
    $(this).find('option').each(function(i,e) { 
     $(e).attr('title',$(e).text()); 
     optionText = $(e).text(); 
     newString = ''; 
     if (optionText.length > maxChar) { 
      array = optionText.split(' '); 
      $.each(array,function(ind,ele) { 
       newString += ele+' '; 
       if (ind > 0 && newString.length > maxChar) { 
        $(e).text(newString); 
        return false; 
       } 
      }); 

     } 
    }); 
});