How to ellipsize overflowing text followed by a badge?

Question

I have a sidebar containing a list of categories, each of them followed by a badge with a number of unread articles in it. Since the categories are user-defined, they can occasionally be longer than the width of the sidebar and thus need to be ellipsized.

Now, my code ellipsizes the items but does so for the whole row, including the badge, which I would like to keep visible. I also want to have the badge just next to the label, not floated to the right.

ul {
  width: 6em;
  background: pink;
  padding: 0.5em;
  list-style: none;
}

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  color: gray;
}

<ul>
  <li>Short <span class="badge">5</span></li>
  <li>Much longer item <span class="badge">13</span></li>
  <li>Another <span class="badge">2</span></li>
</ul>

I have come up with a flexbox-based solution but it requires an extra element. Is there a better way to do this?

score 1 · Answer 1 · answered Feb 22 '19 at 00:58

1

Using flexbox

When we wrap the label into a separate element, we can use flexbox:

ul {
  width: 6em;
  background: pink;
  padding: 0.5em;
  list-style: none;
}

li {
  display: flex;
  white-space: nowrap;
}

.label {
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 0.25em;
}

.badge {
  color: gray;
}

<ul>
  <li><span class="label">Short</span><span class="badge">5</span></li>
  <li><span class="label">Much longer item</span><span class="badge">13</span></li>
  <li><span class="label">Another</span><span class="badge">2</span></li>
</ul>

answered Feb 22 '19 at 00:58

Jan Tojnar

5,306
3
29
49

Or more basically... wrapping the label text separate from the badge, and having the ellipsis only apply to the label text. Flexbox isn't the only way to line up the items, but yea, it is the preferred way. – Kalnode Feb 22 '19 at 01:05
@MarsAndBack What other ways are there? – Jan Tojnar Feb 22 '19 at 01:12
@MarsAndBack I could not make `inline` or `floats` to show the ellipsis. `grid` could work if I disregard the requirement to have the badge right next to the label. – Jan Tojnar Feb 22 '19 at 01:21
In any case, the answer to the original post is separating the label text from the badge. The positioning of the elements is another concern. – Kalnode Feb 22 '19 at 01:34
I started with the `.label` element there, only to remove it since it was not used. The positioning is actually an essential part since without flexbox, the `overflow` on the `.label` element would not do anything at all. – Jan Tojnar Feb 22 '19 at 01:54

score 1 · Answer 2 · answered Feb 22 '19 at 01:53

Here is another flex solution, with the option of many 'badges' or elements

.wrapper {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 30px 0;
  background: rgba(0, 0, 0, 0.1);
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.will-truncate {
  flex: 1;
  min-width: 0;
}

.will-truncate h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badges > div {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: cornflowerblue;
  display: inline-flex;
}


/*nonessentials*/

body {
  padding: 40px;
}

h2 {
  font-size: 1rem;
  font-weight: normal;
}

<div class="wrapper">

  <div class="flex will-truncate">
    <h2>This is a long string that is OK to truncate please and thank you</h2>
    <div class="flex badges">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

</div>

This looks lot like [article](https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/) I came across today. — Jan Tojnar, Feb 22 '19 at 02:05
Yeah, it was taken from there for another question/answer https://stackoverflow.com/questions/50514597/how-to-truncate-string-inside-a-direction-column-flexbox-child/50517037#50517037 @JanTojnar — soulshined, Feb 22 '19 at 02:07

How to ellipsize overflowing text followed by a badge?

2 Answers2

Using flexbox