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；如果它的行为像flex-grow，我希望它像max-width。 [我已经尝试过 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>

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

1 个答案: