Блог

Все, я пытаюсь отключить изменение размера выпадающей кнопки и скрыть переполнение текста.

В моем текущем приложении есть выпадающий список начальной загрузки с некоторыми довольно большими параметрами, доступными для выбора. Я бы хотел..

1. Оставьте кнопку выбора на определенной ширине.
2. скрывает любой избыточный поток, возникающий, когда пользователь выбирает текстовый параметр большого размера.

Я могу установить ширину самой кнопки, но всякий раз, когда я выбираю выделение, которое имеет большую длину, текст выходит за пределы кнопки.

HTML

 <div class="btn-group dropdown">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Values <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Some Very Large Value</a></li>
        <li><a href="#">Some Very Large Value Some Very Large Value</a></li>
        <li><a href="#">Some Very Large Value Some Very Large Value Some Very Large Value</a></li>
      </ul>
    </div>
  

JavaScript

 $(document).ready(function () {
            //Makes the selected value show at the top of the dropdown box
            $(".dropdown-menu li a").click(function () {
                $(this).parents(".dropdown").find('.btn').html($(this).text()   ' <span class="caret"></span>');
                $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
            });
        });
  

jsFiddle

Спасибо!

Вы можете сделать что-то вроде этого: найдите все свои элементы li и проверьте длину текста и отрегулируйте длину

  $('.dropdown-menu').find('li').each(function(){
      console.log( $(this).text().length );
      if($(this).text().length >= 10){
           $(this).text($(this).text().substring(0, 11)   '...')
      }
  });
  

пример jsfiddle