我有一个与此dropdown button类似的下拉按钮。当文本很长时,插入符号和文本溢出按钮的整个宽度或当调整窗口大小到非常小的宽度屏幕时。如何仅剪辑文本。插入符号。我尝试在按钮元素上使用这些。
text-overflow:clip;
white-space:nowrap;
overflow:hidden;
问题是当它剪辑时,插入符号消失了。我希望当文本剪辑从drowndown中选择列表时,插入符号非常长。
答案 0 :(得分:1)
这是因为您的caret
和text
位于button
...
所以只需将dropdown
文字打包到span
并将white-space
属性应用于span
而不是button
...
要white-space
工作,您还必须定义max-width
属性。
还更改了您的jQuery
代码以更改文字...
<强> Updated Fiddle 强>
Stack Snippet
$(".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;
答案 1 :(得分:0)
white-space:nowrap; overflow-y:scroll; overflow-x:hidden;
试试这个
答案 2 :(得分:0)
假设您的按钮具有以下样式:
.btn{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}
你可以将这种风格赋予插入符号。
.caret{
position: absolute;
right: 10px;
top: 15px;
}
以下是一个工作示例:http://jsfiddle.net/rachit5/8vLjyu2x/1