我想让这个按钮文本 chop 而不隐藏插入符号。
当文本很长时,它会隐藏插入符号。 我想将插入符保留在末尾并仅 chop 文本。
这是我的代码 示例文本
.btn-default {
background-color: #F0F0F0;
border-color: #cccccc;
max-width: 16em;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button id="L1.900Level" class="btn btn btn-default dropdown-toggle dropdown-toggle btn-xl-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span> short text </span><span class="caret"></span></button>
<button id="L1.900Level" class="btn btn btn-default dropdown-toggle dropdown-toggle btn-xl-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span> loooooooooooooooooooooooong text </span><span class="caret"></span></button>
最佳答案
@NOTE 此解决方案适用于 bootstrap 4,其中图标不是由 .caret 添加的,而是来自 :after 选择器,尽管如此,相同的逻辑也适用于旧版本。
为此,您需要一个额外的 span
标签。
HTML
<button class="btn w-100 dropdown-toggle">
<span>Alle Termine</span>
</button>
CSS
.dropdown-toggle {
span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
max-width: calc(100% - 5px); // prevents icon from touching right border
vertical-align: middle;
}
}
通知按钮应该有一定的宽度。在我的例子中,按钮获得父容器的 100% 宽度,但在你的例子中你可能有另一个宽度。
这对我来说效果很好。我希望它也能帮助其他人!
关于javascript - 使用省略号 chop 文本,始终将插入符号保留在末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36079462/