Question

我想让这个按钮文本截断而不隐藏插入符号。

当文字很长时，它会隐藏插入符号。我希望将插入符号保留在最后并仅截断文本。

这是我的代码示范文本

＆＃13;

.btn-default {
    background-color: #F0F0F0;
    border-color: #cccccc;
    max-width: 16em;
    overflow: hidden;
    text-overflow: ellipsis;
}

＆＃13;

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

＆＃13;

Answer 1

@NOTE 此解决方案适用于引导程序4，其中图标未由.caret添加，但来自：选择器之后，相同的逻辑也适用于旧版本。为此，您需要额外的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％宽度，但在您的情况下可能有另一个宽度。

这对我来说很有效。我希望它也有助于其他人！

Answer 2

您可以通过为插入符元素提供绝对位置并放置按钮的结尾来执行此操作

.btn-default span.caret {
    position: absolute;
    right: 4px;
    top: 15px;
}

您应该将父元素位置设为相对

.btn-default {
    background-color: #F0F0F0;
    border-color: #cccccc;
    max-width: 16em;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative:
}

使用省略号截断文本，使插入符始终保持在最后

2 个答案: