在可变长度元素上使用省略号裁剪文本

Question

我正在尝试实现一个比较尴尬的布局，在固定宽度的容器中，两个可变长的文本彼此相邻显示。

两段文本都应该保持对齐，但是如果组合的宽度充满了它们的容器，则左元素应该开始溢出（并用省略号隐藏文本）。

.a0 {
  display: flex;
  height: 50px;
  width: 300px;
  border: 2px solid #000;
  margin-bottom: 10px;
}

.a1 {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

.a2 {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  color: #888;
}

.b0 {
  display: block;
  height: 50px;
  width: 300px;
  border: 2px solid #000;
  margin-bottom: 10px;
}

.b1 {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.b2 {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  color: #888;
}

<h3>Using Flex (Desired effect for long text)</h3>
<div class="a0">
  <div class="a1">Short text</div>
  <div class="a2">(Always Visible)</div>
</div>

<div class="a0">
  <div class="a1">Long text Long text Long text Long text </div>
  <div class="a2">(Always Visible)</div>
</div>

<h3>Using Inline block (Desired effect for short text)</h3>
<div class="b0">
  <div class="b1">Short text</div>
  <div class="b2">(Always Visible)</div>
</div>

<div class="b0">
  <div class="b1">Long text Long text Long text Long text </div>
  <div class="b2">(Always Visible)</div>
</div>

当合并宽度小于容器的宽度时，我仍在努力使溢出文本保持对齐，而我仍在努力地获得溢出效果。

有人知道用一种样式就能达到这种效果吗？

Answer 1

只需从您的flex实现（width: 100%类）中删除.a1。

.a0 {
  display: flex;
  height: 50px;
  width: 300px;
  border: 2px solid #000;
  margin-bottom: 10px;
}

.a1 {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.a2 {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  color: #888;
}

.b0 {
  display: block;
  height: 50px;
  width: 300px;
  border: 2px solid #000;
  margin-bottom: 10px;
}

.b1 {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.b2 {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  color: #888;
}

<h3>Using Flex (Desired effect for long text)</h3>
<div class="a0">
  <div class="a1">Short text</div>
  <div class="a2">(Always Visible)</div>
</div>

<div class="a0">
  <div class="a1">Long text Long text Long text Long text </div>
  <div class="a2">(Always Visible)</div>
</div>

<h3>Using Inline block (Desired effect for short text)</h3>
<div class="b0">
  <div class="b1">Short text</div>
  <div class="b2">(Always Visible)</div>
</div>

<div class="b0">
  <div class="b1">Long text Long text Long text Long text </div>
  <div class="b2">(Always Visible)</div>
</div>

Answer 2

您可以在a1类中设置自动宽度。

.a1 {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: auto;
}