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

Question

I want to make this button text to truncate without hiding the caret.

When text is long it hides the caret. I want to keep the caret at the end and truncate the text only.

This is my code Sample Text

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

Answer 1

@NOTE this solution is for bootstrap 4 where icon is not added by .caret but from :after selector nonetheless same logic may work on older versions as well. For this to work you need an additional span tag.

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

Notice button should have a certain width. In my case button gets 100% width of the parent container but you may have another width in your case.

This worked well on my end. I hope it helps other people as well!

Answer 2

You can do this by giving position absolute to the caret element and place end of your button

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

And you should make the parent element position as relative

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