flex布局中,保持内容不超出容器的解决办法
来源:互联网 发布:win7网络id灰色 编辑:程序博客网 时间:2024/05/16 13:40
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题。
就是在一个设置了 flex:1 的容器中,如果文字很长,这时候文字就会超出容器,而不是呆在设置好的动态剩余的空间中。由于实际项目的比较复杂,不好拿出来说,这里就把问题简化描述如下:
大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度。
<div class="main"> <img alt="" class="logo" src="pic.jpg"> <div class="content"> <h4 class="name">a name</h4> <p class="info">a info</p> <p class="notice">This is notice content.</p> </div></div>
.main { display: flex;}.logo { width: 100px; height: 100px; margin: 10px;}.content { flex: 1;}.content > * { white-space: nowrap; 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,虽然宽度受限,但在特定宽度下省略符…显示不全,有时只显示两个点..
- flex布局中,保持内容不超出容器的解决办法
- FLEX容器的布局规则
- td中内容不换行的解决办法
- flex布局中对齐项目和对齐内容的区别
- 固定大小的块中,保持两行超出省略
- C# 绘制内容超出Panel尺寸上限的解决办法
- quick游戏开发——容器内容超出边界不显示
- cocostudio创建的scrollview内容超出scrollview部分不隐藏
- 【安卓】让子元素超出容器限制、!如何实现更灵活的容器布局、!
- Flex中如何创建一个可以自动换行并调整布局的ToolBar容器
- Flex之旅:第二部分:容器与布局(6)---在容器中滚动到某个指定的子组件
- 截断超出的内容
- Flex4中 超出父容器边界的子项隐藏
- 关于flex布局容器属性
- CSS3 Flex布局(容器)
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
- flex布局文本不换行不显示省略号的解决方法
- 如何快速方便的输出向量vector容器中不重复的内容
- Retrofit2.0+RxAndroid2.0实现网络下载
- WSingle主题 – 支持多本的WordPress小说主题,美观大方,功能强大
- 微信小程序教学第二章:小程序中级实战教程之预备篇
- C++——【USACO 4.4.1】——Shuttle Puzzle
- mysql InnoDB引擎报1114表满错误
- flex布局中,保持内容不超出容器的解决办法
- Android开发中pullToRefresh的配置
- 反编译:apktool、dex2jar、jd-gui的区别及详解
- win10 python3.5安装mysql的API
- JSP交互---分页查询(条件分页查询)
- 下拉刷新控件一个很好用的开源项目SmartRefreshLayout
- Tinker热修复之 —— Gradle接入
- 隐藏WebAppBuilder构建器中地图右下角esri的logo
- 大数据量下高并发同步