css防⽌⼦元素超出盒⼦，解决flex布局内容超出盒⼦宽度问题在移动端，flex 布局很好⽤，它能够根据设备宽度来⾃动调整容器的宽度，⽤起来很⽅便，已经越来越离不开它，但是最近在做项⽬的时候发现⼀个问题。
就是在⼀个设置了 flex:1 的容器中，如果⽂字很长，这时候⽂字就会超出容器，⽽不是呆在设置好的动态剩余的空间中。
例⼦：
⼤致是有⼀个main容器是flex布局，左边⼀个logo固定宽⾼，右边content动态宽度。
a name
a info
This is notice content.
.main {
display: flex;
}
.logo {
width: 100px;
height: 100px;
margin: 10px;
}
.content {
flex: 1;
}
.content > * {
white-space: nowrap;
css布局左边固定右边自适应
overflow: hidden;
text-overflow: ellipsis;
}
.notice可能会⾮常长，⼀些设备下需要隐藏显⽰，即不换⾏，并留下省略符…作标记。
这⾥会发现text-overflow: ellipsis不⽣效，省略符根本没有出现。⽽且因为设置了 nowrap 会发现⽂字会将 content 撑开，导致内容超出了屏幕。所以必须要解决这个问题。
尝试取消⽗元素.content的flex: 1，⽆效。
尝试取消.main容器的display: flex，省略号出现。
因此猜测是flex布局的问题，进⼀步猜测省略符需要对⽗元素限定宽度。
尝试对⽗元素.content设置width: 100%⽆效，但是设置width: 0可⾏。即：
.content {
flex: 1;
width: 0;
}
如果不设置宽度，.content可以被⼦节点⽆限撑开；因此.notice总有⾜够的宽度在⼀⾏内显⽰所有⽂本，也就不能触发截断省略的效果。测试还有⼀种⽅法可以达到效果：
.content {
flex: 1;
overflow: hidden；
}
上⾯的⼆种⽅法都可以达到我们需要的效果，即给 content 设置了 flex 为 1 的时候，它会动态的获得⽗容器的剩余宽度，且不会被⾃⼰的⼦元素把内容撑开。
经过测试，以下的⽅法是⽆效的：
给html, body设置max-width，元素似乎能强⾏撑开页宽；
给body设置overflow，页宽不能被撑开了，但元素宽度还在，即元素本⾝还是溢出；
给html, body同时设置max-width和overflow，页宽限定在max-width内，元素本⾝还是溢出；
给.main容器设置overflow: hidden，同理.main是不溢出了，.notice本⾝还是溢出；
给.notice元素设置width或max-width，虽然宽度受限，但在特定宽度下省略符…显⽰不全，有时只显⽰两个点..

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。