文本溢出：省略号和 Flexbox答案

【问题标题】：Text-overflow:ellipsis and Flexbox文本溢出：省略号和 Flexbox
【发布时间】：2019-03-06 07:53:27
【问题描述】：

我想要一个带有文本和图标的框。图标应该贴在框的右侧，文本在左侧。如果文本太长而无法放入图标旁边的框中，我希望它被text-overflow:ellipsis 属性缩短。如果有更好的方法，我不坚持使用 Flex-Box 来实现它。

应该是这样的：

这是我目前所取得的成就：

div#Wrapper {
  border: 0.2em solid black;
  width: 6em;
  padding: 0.5em;
  display: flex;
}


span#Text {
  white-space: nowrap;
  text-overflow: ellipsis;
}


span#Icon {
  background-color: blue;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  display: inline-block;
  margin-left: auto;
}

Short Text:
<div id="Wrapper">
  <span id="Text">
    This
  </span>
  <span id="Icon"> 
  </span>
</div>

<br><br><br>

Text:
<div id="Wrapper">
  <span id="Text">
    This is Text
  </span>
  <span id="Icon"> 
  </span>
</div>

<br><br><br>

Long Text:
<div id="Wrapper">
  <span id="Text">
    This is long long long Text
  </span>
  <span id="Icon"> 
 
  </span>
</div>

【问题讨论】：

ID 应该是唯一的。

标签： html css flexbox ellipsis

【解决方案1】：

给你。

https://jsfiddle.net/hxz05g9j

另一种方法是将圆圈设为:after css。

【讨论】：

【解决方案2】：

我已将 ID 替换为类，因为 ID 在文档中必须是唯一的。此外，我为文本添加了overflow: hidden，为图标添加了flex: 0 0 auto。

div#Wrapper {
  border: 0.2em solid black;
  width: 6em;
  padding: 0.5em;
  display: flex;
}

span.Text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; /* Added */
}

span.Icon {
  background-color: blue;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  display: inline-block;
  margin-left: auto;
  flex: 0 0 auto; /* Added */
}

Short Text:
<div id="Wrapper">
  <span class="Text">
    This
  </span>
  <span class="Icon"> 
  </span>
</div>

<br><br><br> Text:
<div id="Wrapper">
  <span class="Text">
    This is Text
  </span>
  <span class="Icon"> 
  </span>
</div>

<br><br><br> Long Text:
<div id="Wrapper">
  <span class="Text">
    This is long long long Text
  </span>
  <span class="Icon"> 
 
  </span>
</div>

【讨论】：

【解决方案3】：

您可以在text 元素上添加flex: 1 和overflow: hidden 属性。

div#Wrapper {
  border: 0.2em solid black;
  width: 6em;
  padding: 0.5em;
  display: flex;
}
span#Text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
span#Icon {
  background-color: blue;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  margin-left: auto;
}

<div id="Wrapper">
  <span id="Text">
    This is long long long Text
  </span>
  <span id="Icon"></span>
</div>

【讨论】：