这几天遇到一个及其神奇的事情:当我的 flex
布局加上 white-space:nowrap
,子元素就溢出了!
在项目的某个页面中要做一个Menu(这个Menu不是项目的主Menu,而是某个页面中的内容),预想是做成这个样子的:
因为Menu必须要和旁边一样高,而rightContent的内容是动态的,不确定究竟有多高,想到用绝对布局,但这种绝对布局,还是能不用就不用吧。然后我就用flex
布局,写了这样的样式代码:
// [less代码]
// 最外层的灰色框
.container {
display: flex;
// 左边的Menu
.leftMenu {
width: 150px;
}
// 右边的内容(小黄框我用的是栅格布局,这里就不po代码了)
.rightCont {
flex: 1;
.div {
white-space: nowrap; // 这个太关键了!
text-overflow: ellipsis;
overflow: hidden;
}
}
}
然后就不得了了,渲染出来和想象中的不一样啊:
(啊!!!我的眼睛!!!)
为什么会这样?!吓得我赶紧去找原因。开始也不知道是为什么,一点点注释了看看,把white-space: nowrap
注释掉的时候,居然就不会撑出来了!
找到原因:由于默认的最小尺寸是内容尺寸,所以当设置
white-space: nowrap
时,文本不能自动换行,内容宽度就开始撑出。所以我们主动告诉渲染引擎最小宽度是0,你放心缩好了,溢出问题就解决了。
关键就是给需要缩的元素设置min-width: 0px
。
解决成功后的代码:
[less代码]
// 最外层的灰色框
.container {
display: flex;
// 左边的Menu
.leftMenu {
width: 150px;
}
// 右边的内容
.rightCont {
flex: 1;
min-width: 0; // 这个样式,拯救了一切!
.div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}