在移动端，flex布局非常好用，它可以根据设备的宽度自动调整容器的宽度，但是最近在做项目的时候发现一个问题：a在li中设置了flex，flex:0033.333%，然后子元素中的文字超过flex定义的宽度后自动省略。
Xiaomi小米小米小米小米小米小米小米小米小米小米小米小米小米
ul{display:flex;}li{-webkit-box-flex:0;-ms-flex：0033.333%；弹性：0033.333%；文本对齐：居中；填充：01.333vw；-webkit-box-sizing：边框框；框大小：边框框；margin-bottom:2.667vw;}lip{字体大小:3.2vw;颜色：#8F8E94；文本溢出：省略号；white-space:nowrap;}这时候你会发现p的文字可能会很长，有些设备需要隐藏显示。即不换行，留省略号...作为标记。这里会发现text-overflow:ellipsis没有生效，根本没有出现省略号。而且因为设置了nowrap，你会发现文字会拉伸内容，导致内容超出屏幕。所以这个问题必须要解决。尝试取消父元素的flex.li:0033.33%，无效。尝试取消ul容器的display:flex，出现省略号。所以猜测是flex布局的问题，进一步猜测是省略号需要限??制父元素的宽度。尝试在父li上设置width:100%不起作用，但设置width:0有效。即：li{flex:0033.333%;width:0}如果不设置宽度，li可以被子节点无限拉伸；因此，p总是有足够的宽度来显示一行中的所有文本，不会触发截断和省略的效果。还有一种方法可以测试效果：li{flex:0033.333%;overflow:hidden;}以上两个方法可以达到我们需要的效果，即当为li设置flex的值时，会动态获取父容器剩余的宽度，内容不会被其拉伸自己的子元素。给html和body设置max-width，元素好像可以强行扩大页面宽度；为body设置overflow，页面宽度不能展开，但是元素宽度还在，即元素本身还是溢出；同时给html和body设置max-width和overflow，页面宽度被限制为max-width，元素本身还是会溢出；为.main容器设置overflow:hidden，同样，.main不会溢出，.notice本身还是会溢出；setwidthorforthe.noticeelementmax-width，虽然限制了宽度，但是在一定宽度下，省略号...显示不全，有时只显示两点..
