Bootstrap Dropdown禁用按钮的大小调整

Bootstrap Dropdown Disable resizing of button

本文关键字：调整 按钮 Dropdown Bootstrap      更新时间：2023-09-26

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

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

  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示例

相关文章：