文本溢出：省略号在弹性框中失败

Question

我浏览过几篇关于类似情况的帖子，但其中大部分都很复杂。我想出了一个像这样的最小案例：

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="container">absdhkahdgoiqwhdklqhndkjqhdkhb</div>
      <div className="container flex">absdhkahdgoiqwhdklqhndkjqhdkhb</div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  color: white;
  background-color: darkslategray;
  width: 100px;
  height: 100px;
  padding: 0 16px;
  margin: 20px auto;

  /* for ellipsis to work */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  /* center the text vertically using line height */
  line-height: 100px;
}

.flex {
  /*  center the text vertically using flex */
  display: flex;
  align-items: center;
  line-height: unset;
}

codeandbox 链接是正确的here。

我认为这是我们可以真正关注 flexbox 副作用的最小案例。在上面，第一个 div 使用与容器高度相同的 line-height 来垂直移动文本，而第二个 div 使用 flexbox 进行相同的对齐。显然，在第二种情况下，省略号失败了。我没有找到任何令人信服的解释。能解释下效果的大神们都明白了，谢谢！

Answer 1

只需将.flex 中的文本换行到span 中。并设置您为 .container 设置的相同属性

<div className="container flex">
  <span> absdhkahdgoiqwhdklqhndkjqhdkhb </span>
</div>

.flex span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}