结合文本溢出:省略号与display:flex

Question

我想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>

Answer 1

将您的文本放在内部span,display: flex并在span上使用父文本和文本溢出.

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