今天遇到个关于flex布局的问题,在电脑上没看出来,打包到app上发现的
-
父元素div使用flex布局,子元素有一行文字比较长,将其设置为不换行隐藏后显示省略号,在浏览器上显示的是没问题的,也就没在意,结果打包成app之后,发现内容撑开了导致布局变形,这种情况是因为 flex 布局特性,子内容优先被内容撑开使得文字不隐藏**
-
解决:将该元素的宽度设置为 0 ,然后使用 flex:1 样式,将宽度交给flex布局来决定,最终子元素不会被内容撑开
今天遇到个关于flex布局的问题,在电脑上没看出来,打包到app上发现的
父元素div使用flex布局,子元素有一行文字比较长,将其设置为不换行隐藏后显示省略号,在浏览器上显示的是没问题的,也就没在意,结果打包成app之后,发现内容撑开了导致布局变形,这种情况是因为 flex 布局特性,子内容优先被内容撑开使得文字不隐藏**
解决:将该元素的宽度设置为 0 ,然后使用 flex:1 样式,将宽度交给flex布局来决定,最终子元素不会被内容撑开
转载于:https://juejin.im/post/5d036b3bf265da1ba328c1b3