CSS:flex布局 超出不换行不显示省略号 或父元素被撑开

CSS:flex布局 超出不换行不显示省略号 或父元素被撑开_第1张图片
对要求超出隐藏的那行字附加

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

其结果
CSS:flex布局 超出不换行不显示省略号 或父元素被撑开_第2张图片
图片是固定长宽,因为子元素被要求不换行,导致整个容器被撑出屏幕外,而且可以看出子元素的text-overflow和overflow并没有生效

解决方案:查看父元素或爷元素是否有min-width属性将其值设置0

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;

子元素的text-overflow和overflow才会生效
CSS:flex布局 超出不换行不显示省略号 或父元素被撑开_第3张图片

你可能感兴趣的:(Web,css,flex)