具有最大宽度的内联块不会有省略号

Question

我有一个block 元素，其中有一个inline，另一个inline 有一个彩色子弹（用作文本的标记）。

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

文本有时会从块中溢出，因此我需要对此进行限制并添加省略号以防发生这种情况（文本之后，标记之前的省略号。

为了让省略号显示，我必须将文本元素转换为具有恒定宽度的块。为了使块发挥作用 inline-ish（它必须表现为统一的内联文本），我添加了 float: left。

我想获得其他 inline 显示属性，但我没有像上面那样获得，而且我也不想做这么糟糕的事情（强制 inline 属性block 只是因为需要省略号）。我不喜欢使用减小宽度来填充父 .label-container；如果它的行为类似于max-width，我希望有类似flex-grow 的东西。 [我已经尝试过 inline-block，就其 inline-like-properties 而言，这对我来说已经足够了，但它不起作用！虽然我有许可证，但我不喜欢使用 dotdotdot]。

有什么改变的建议吗？ :{

Answer 1

你可以试试这样的 flexbox：

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