Question

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

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

将选择按钮保持在特定宽度。
隐藏当用户选择大小的文本选项时发生的任何过流。

我可以设置按钮本身的宽度，但每当我选择一个长度很大的选项时，文本会溢出按钮。

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

Bootstrap Dropdown禁用按钮大小调整

1 个答案: