结合 text-overflow:ellipsis 和 display:flex [重复]答案

【问题标题】：Combining text-overflow:ellipsis with display:flex [duplicate]结合 text-overflow:ellipsis 和 display:flex [重复]
【发布时间】：2017-08-04 01:55:30
【问题描述】：

我想使用display: flex; 进行居中，同时在文本溢出时使用... 溢出。似乎只要我介绍了display: flex，省略号就会停止工作。关于如何将这两者结合起来的任何建议？ JSFiddle：https://jsfiddle.net/silverwind/sw78h02b/1/

.target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: red;
  margin: 2rem;
  display: flex; /* remove this to get ellipsis to show */
}

<div class="target">
  Text here is very very long that it will overflow the width of the containing element. Adding another sentence to make sure it will overflow.
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将您的文本放在span 中，并在父级上使用display: flex，在跨度上使用文本溢出。

.target {
  background: red;
  margin: 2rem;
  display: flex; 
}
span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="target">
  <span>Text here is very very long that it will overflow the width of the containing element. Adding another sentence to make sure it will overflow.</span>
</div>

【讨论】：