javascript - Bootstrap Dropdown 禁用调整按钮大小

Question

所有， 我正在尝试禁用下拉按钮的大小调整并隐藏文本溢出。

我当前的应用程序有一个引导下拉列表，其中有一些相当大的选项可供选择。我愿意..

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

谢谢!

Answer 1

你可以这样做: 找到你所有的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 example