• 问题效果
  

• 想要的效果
  

• template

<div class="text-container">
  这是一段很长很长的文字，用来测试文字超出隐藏效果。这是一段很长很长的文字，用来测试文字超出隐藏效果。
</div>

css样式是固定宽度的，并且设置了overflow: hidden;text-overflow: ellipsis;white-space: nowrap;，结果发现没有发生作用

.text-container {
    
    
  width: 300px;
  height: 50px;
  background-color: red;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

问题原因： 设置了display:flex;align-items: center;，一开始写这两行代码的目的是为了文字垂直居中，但是无意中开启的文字元素的BFC特性，使得省略号展示失效了