文字溢出：省略号和Flexbox

Question

我想要一个带有文本和图标的框。图标应该贴在框的右侧，文本贴在左侧。 如果文本太长而无法放入图标旁边的框中，我希望通过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>

Answer 1

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

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>

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

Answer 3

你在这里。

https://jsfiddle.net/hxz05g9j

另一种方法是用:after css作为圈。