Question

我有一个与此dropdown button类似的下拉按钮。当文本很长时，插入符号和文本溢出按钮的整个宽度或当调整窗口大小到非常小的宽度屏幕时。如何仅剪辑文本。插入符号。我尝试在按钮元素上使用这些。

text-overflow:clip; 
white-space:nowrap; 
overflow:hidden;

问题是当它剪辑时，插入符号消失了。我希望当文本剪辑从drowndown中选择列表时，插入符号非常长。

Answer 1

这是因为您的caret和text位于button ...

内

所以只需将dropdown文字打包到span并将white-space属性应用于span而不是button ...

要white-space工作，您还必须定义max-width属性。

还更改了您的jQuery代码以更改文字...

<强> Updated Fiddle

Stack Snippet

＆＃13;

$(".dropdown-menu li a").click(function() {
  $(this).parents(".dropdown").find('.btn span.text').text($(this).data('value'));
});

＆＃13;

.btn-default.dropdown-toggle .text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<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.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="text">Dropdown Dropdown Dropdown</span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

＆＃13;

Answer 2

white-space:nowrap; overflow-y:scroll; overflow-x:hidden;

试试这个

Answer 3

假设您的按钮具有以下样式：

.btn{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

你可以将这种风格赋予插入符号。

.caret{
    position: absolute;
    right: 10px;
    top: 15px;
}

以下是一个工作示例：http://jsfiddle.net/rachit5/8vLjyu2x/1

如何剪辑文本溢出引导下拉按钮

3 个答案: