html - 如何截断水平项目列表中的文本，以便首先截断最长的项目？

Question

我有一个限制为一行的标签列表。每个标签的文本需要在较小的屏幕上截断。这种截断应该如下进行：只截断最长的项目，直到它与第二长的项目长度相同，然后截断两者，直到它们都与第三长的项目长度相同，依此类推。

到目前为止，我只能提出两种不太正确的方法：

1. 在下面的示例中，我使用了 flexbox。每个项目都被均匀截断，这意味着短项目很快被截断为一个字母，而较长的项目仍然很长。

.list {
  display: flex;
}

.tag {
  border: 1px solid black;
  margin-right: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 20px;
}

<div class="list">
  <div class="tag">Hello</div>
  <div class="tag">What's going on?</div>
  <div class="tag">Good morning, how are you?</div>
  <div class="tag">What's up?</div>
</div>

2. 在此示例中，我使用定义为百分比的最大宽度。这会过早地截断长项目，并且项目不会占据容器的整个宽度。

.tag {
  border: 1px solid black;
  margin-right: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 20px;
  max-width: calc(25% - 9px);
  display: inline-block;
}

<div>
  <div class="tag">Hello</div>
  <div class="tag">What's going on?</div>
  <div class="tag">Good morning, how are you?</div>
  <div class="tag">What's up?</div>
</div>

标签： htmlcss