Text-overflow:省略号和 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

您可以在 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>

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.

Text-overflow:省略号和 Flexbox

Text-overflow:ellipsis and Flexbox

html

css

flexbox

ellipsis