flex布局被子元素撑开如何保持内容不超出容器的方法 第一次感受春天

flex布局被子元素撑开如何保持内容不超出容器的方法 第一次感受春天

ul{display:flex;}li{-webkit-box-flex:0;-ms-flex:%;flex:%;text-align:center;padding:;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:;}lip{font-size:;color:#8F8E94;text-overflow:ellipsis;white-space:nowrap;}这时候会发现,p的文字可能会非常长,一些设备下需要隐藏显示,即不换行,并留下省略符…作标记。 这里会发现text-overflow:ellipsis不生效,省略符根本没有出现。

而且因为设置了nowrap会发现文字会将content撑开,导致内容超出了屏幕。 所以必须要解决这个问题。 尝试取消父元素.li的flex:%,无效。 尝试取消ul容器的display:flex,省略号出现。

因此猜测是flex布局的问题,进一步猜测省略符需要对父元素限定宽度。 尝试对父元素li设置width:100%无效,但是设置width:0可行。 即:li{flex:%;width:0}如果不设置宽度,li可以被子节点无限撑开;因此p总有足够的宽度在一行内显示所有文本,也就不能触发截断省略的效果。

测试还有一种方法可以达到效果:li{flex:%;overflow:hidden;}上面的二种方法都可以达到我们需要的效果,即给li设置了flex的值的时候,它会动态的获得父容器的剩余宽度,且不会被自己的子元素把内容撑开。