CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
youri
youri

Reputation: 1160

Truncate text for last elements if needed

I have the following HTML code (I'm using bootsrap 4):

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

My badge-container has a fixed width, 150px for example, and should be on one single line. So all the badge elements are not fitting in (I don't know in advance the number of badge).

I'd like the first elements overflowing my div ended with ... and the next elements should be hidden. Like this for example:

One Thow Three Fo...

I tried the following CSS:

.badge-container {
  background: red;
  width: 150px;
  display: flex;
}

// I can use text-truncate class instead
.badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

But it's not working as all elements are truncated...

How would you achieve this? Is this possible in pure CSS?

Upvotes: 0

Views: 611

Answers (4)

supriya suresh g
supriya suresh g

Reputation: 385

    HTML
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
    <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>

    CSS
   .badge-container {
  background: red;
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
.badge-container .badge {
  display:inline; /*Remove this to have a different rendring*/
}

.badge-container:hover {
   overflow:visible;
    width: 400px;
   }

Upvotes: 0

dns_nx
dns_nx

Reputation: 3953

This should work as expected:

.badge-container {
  background: red;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

// I can use text-truncate class instead
.badge {
  white-space: nowrap;
}

Upvotes: 1

Pedro Figueiredo
Pedro Figueiredo

Reputation: 2452

You were close to the solution, your problem was that you were applying the truncate code to the elements it self, and it has to be to the container to have the desired behaviour. Something like this:

.badge-container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: red;
}
  <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>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273777

Remove flexbox and keep it simple:

.badge-container {
  background: red;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
.badge-container .badge {
  display:inline; /*Remove this to have a different rendring*/
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<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>

Upvotes: 1

Related Questions