我想使此按钮文本截断而不隐藏插入符号。

当文本较长时,它将隐藏插入符号。
我想将插入符号保留在最后,仅截断文本。

这是我的代码

     示例文本
    
    



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

最佳答案

@注意,此解决方案适用于引导程序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%,但在您的情况下,您可能会有另一个宽度。

这对我来说效果很好。我希望它也对其他人有帮助!

10-07 19:35
查看更多