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

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 属性到 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>

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

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

html

css

display

ellipsis