Question

我有一个bootstrap下拉按钮。我想在下拉列表中选择项目后限制按钮中的文本显示，因此按钮不会展开。（例如，有些孩子......，而不是学校中的一些孩子）有点像最大宽度，但设置最大宽度似乎不起作用。我有一个小提琴here，但似乎无法使用下拉项目。与下面的嵌入代码相同

＆＃13;

$('#clientGroups li').on('click', function () {
            $('#spnSelectedGroup').text($(this).text());
        });

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group ">
  <div class="input-group-btn">
    <button id="btnClientGroups" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="spnSelectedGroup">Groups</span>  <span class="caret"></span>
    </button>
    <ul id="clientGroups" class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
    </ul>
  </div>
  
</div>

＆＃13;

Answer 1

通过使用CSS，您可以在内部文本上设置固定宽度，并使用text-overflow: ellipsis

添加省略号

#btnClientGroups > span {
  display: inline-block;
  vertical-align: middle;
}

#spnSelectedGroup {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

jsfiddle

限制按钮中显示的文本

1 个答案: