在开发的时候，碰到过设置单行文本超出显示省略号失效的问题开发场景：

父容器设置display:flex;
左侧容器固定宽度;
右侧容器自适应宽度;
然后给右侧容器中的一个块级元素设置单行文本超出显示省略号.

右侧容器宽度设置flex:1,然后给其中的一个p标签设置如下css属性：

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

但是文字只显示在一行，并且超出了容器，且没有将超出部分显示为省略号查阅之后找到了解决方法，如下：

display为flex元素的子元素flex-item如果宽度是自适应的，
flex-item元素内的子元素要实现单行文本省略，
需要给flex-item添加overflow:hidden样式。

！！！！我在项目中使用了该方法，证明是可行的

!!!综合百度上的说法进行总结

1. 单行文本省略必须满足三个css样式：

overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;