I am working with Bootstrap 4 and have the following HTML code:
<div class="badge-container">
<span class="badge badge-pill badge-primary">One</span>
<span class="badge badge-pill badge-primary">Two</span>
<span class="badge badge-pill badge-primary">Three</span>
<span class="badge badge-pill badge-primary">Four</span>
<span class="badge badge-pill badge-primary">Five</span>
<span class="badge badge-pill badge-primary">Six</span>
<span class="badge badge-pill badge-primary">Seven</span>
<span class="badge badge-pill badge-primary">Eight</span>
<span class="badge badge-pill badge-primary">Nine</span>
</div>
The badge-container has a fixed width, for example, 150px, and should be displayed on one line. However, all the badge elements are not fitting in within this space (and I don't know in advance how many badges there will be).
I want the first elements to overflow my div and end with an ellipsis (...) while hiding the remaining elements. This is what I'm aiming for:
One Thow Three Fo...
I attempted to use the following CSS:
.badge-container {
background: red;
width: 150px;
display: flex;
}
// Instead of creating a new class, consider using the text-truncate class that Bootstrap provides.
.badge {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
However, this solution is truncating all elements which is not the desired outcome.
How can I achieve the desired result? Is it possible to do this using only CSS?