1. 首页
  2. css

CSSFlexbox和截断文本

情况:flex子元素中只有一行文本。你不希望文本被包装,你希望它被省略号截断(或者退回到仅仅隐藏溢出)。但最坏的情况发生了。不可思议!布局会打断并强制整个flex父元素过宽。Flexbox应该有助于简化布局!
幸运的是,有一个(标准化的)解决方案。您只需使用非flexbox属性/值即可完成此操作。
我们想要的是动画GIF,它显示随着flex子对象变窄而截断的文本。潜在的问题动画GIF,它显示非包装文本防止flex父级变窄。
这不仅可能防止容器变窄,还可能将容器吹得过宽。子元素(flex子级的)是一个问题
有点让人困惑……如果手头的文本直接在flex子级中,工作正常:

/* Text is directly within flex child,so doing the wrapping here */.flex-child {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
当存在子元素时,问题就会出现,例如:

/* Text is a header now,so need to truncate there for it to work */.flex-child > h2 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}解决方案是flex子元素上的min-width: 0;
或min-width一些实际值。否则,包含其他文本元素的flex子级将不会缩小到这些文本元素的\”隐含宽度\”之外。当我第一次遇到这个问题时,我通过AJ Foster的笔找到了解决办法。他写道:
根据一个草案规范,当flex容器的大小缩小时,上面的文本不应该完全折叠。因为.subtitle的宽度是100%,flexbox生成的minwidth:auto计算表明它的容器应该比我们想要的大。
我发现这种行为在Chrome、Opera和Firefox中是一致的。Safari甚至在没有最小宽度的情况下也在缩小/截短(我认为这是违反规范的)。演示
1. 工作:文本直接位于flex child中
2. 中断:文本位于flex child中的中
3. 工作:文本位于flex child中的,但min-width设置在flex child中

CSSFlexbox和截断文本 为WP2原创文章,链接:https://www.wp2.cn/css/cssflexbox%e5%92%8c%e6%88%aa%e6%96%ad%e6%96%87%e6%9c%ac/