html - 具有最大宽度的内联 block 不会有省略号

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>

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

为了让省略号显示，我不得不将文本元素变成一个宽度不变的 block 。为了使 block 表现出内联风格(它必须表现为统一的内联文本)，我添加了float: left。

我想获得其他内联显示属性，但我没有像上面那样获得，我也不想做这样糟糕的事情(强制内联属性放在 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>