Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: