Javascript 使用省略号截断文本，使插入符号始终位于末尾

我想在不隐藏插入符号的情况下截断此按钮文本

当文本较长时，它会隐藏插入符号。 我想在结尾保留插入符号，只截断文本

这是我的密码 示例文本

.btn默认值{
背景色：#f0；
边框颜色：#中交；
最大宽度：16em；
溢出：隐藏；
文本溢出：省略号；
}

短文
looooooong text

您可以通过为插入符号元素指定绝对位置并放置按钮的末端来完成此操作

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

---

@注意此解决方案适用于bootstrap 4，其中图标不是由.caret添加的，而是由：在选择器之后添加的，但相同的逻辑也可能适用于旧版本。 要使其正常工作，您需要额外的

span

标记

HTML

<button class="btn w-100 dropdown-toggle">
    <span>Alle Termine</span>
</button>

注意按钮应该有一定的宽度。在我的例子中，按钮获得父容器的100%宽度，但在你的例子中，你可能有另一个宽度

---

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

你为此做了什么？在此处共享您的代码。@MadanBhandari共享了代码。谢谢

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