inline-block with max-width won't have ellipsis

Question

I had a block element in it there is a inline, and another inline that holds a coloured bullet (used as a mark for the text).

.label-container {
  width: 160px; /* const width*/
}

.label {
  display: block;
  max-width: calc(100% - 1em); /* const max-width (parent - ~.highlighted mark)*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.highlighted-mark:after {
  content: '●';
}

<div class="label-container">
  <span class="label">Label</span>
  <span class="highlighted-mark"></span>
</div>

The text sometimes overflows from the block so I need limiting this and adding an ellipsis in case this happens (ellipsis between after the text, before the mark.

In order to let the ellipsis show I had to turn the text element to a block with constant width. For the block to act inline-ish (it had to behave as an uniform inline text) I added the float: left.

I want to get other inline display properties that I do not get as it is above and I also do not want to do such a bad parctice (forcing inline properties onto a block only because of the need of ellipsis). I did not like this use of reduction of widths in order to fill the parent .label-container; I'd hope for something like flex-grow if it'd have act like max-width. [I already tried inline-block, which is enough for me regarding its inline-like-properties, but it won't work! I prefer not using dotdotdot though I have a license].

Any proposal for a change? :{

Answer 1

You can probably try flexbox like this:

.label-container {
  width: 160px; /* const width*/
  border:1px solid;
  display:flex;
}

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

.highlighted-mark:after {
  content: '●';
}

<div class="label-container">
  <span class="label">Label</span>
  <span class="highlighted-mark"></span>
</div>
<div class="label-container">
  <span class="label">very looooooooong Label</span>
  <span class="highlighted-mark"></span>
</div>