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

【问题标题】：Crop text using ellipsis on a variable length element在可变长度元素上使用省略号裁剪文本
【发布时间】：2019-05-17 17:54:32
【问题描述】：

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

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

.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>

当组合宽度小于容器时，我正在努力获得溢出效果，同时仍然使右文本左对齐。

有谁知道用一组样式实现这种效果的方法吗？

【问题讨论】：

标签： html css

【解决方案1】：

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

.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>

【讨论】：

不知道我是怎么错过的，我猜是漫长的一天，谢谢。

【解决方案2】：

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

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

【讨论】：