flex布局中，保持内容不超出容器的解决办法

本文转载链接：https://blog.csdn.net/zgh0711/article/details/78270555
在移动端，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 的时候，它会动态的获得父容器的剩余宽度，且不会被自己的子元素把内容撑开。

flex布局中，保持内容不超出容器的解决办法相关推荐

html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
flex AS中TabNavigator子项后报超出索引 commitProperties解决
<mx:TabNavigator id="myTabNa" x="242" y="113" width="200" ...
演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
flex 布局，flex-grow 宽度未等比放大问题解决办法
flex 布局,flex-grow 宽度未等比放大问题解决办法参考文章: (1)flex 布局,flex-grow 宽度未等比放大问题解决办法 (2)https://www.cnblogs.com/ ...
计算机显示屏显示超出屏幕大小,电脑显示器超出范围的解决办法步骤
想知道显示器超出范围了应该怎么办吗,下面是学习啦小编带来的关于电脑显示器超出范围怎么办的内容,欢迎阅读! 电脑显示器超出范围的解决办法解决方法: 1,开机,当快要进入系统选项时,立即按F8键进入&q ...
VC++线程中不能用updatedata（）的解决办法
本文转自http://hi.baidu.com/xiaoqiangswust/item/f9ea3c8f296d9bdf5f0ec1e7 线程中不能用updatedata()的解决办法用sendme ...
关于python 中h5py库安装不上的解决办法
关于python 中h5py库安装不上的解决办法问题解决步骤 1.先安装wheel这个库,方法就是从命令行中输入pip install wheel 2.下载自己对应的h5py的版本,网址如下 3. ...
虚拟机中火狐连不上服务器,VMware虚拟机中Ubuntu18.04无法连接网络的解决办法
VMware虚拟机中Ubuntu18.04无法连接网络的解决办法虚拟机中Ubuntu18.04无法连接网络的解决办法,具体内容如下对VMware虚拟机进行恢复默认网络设置恢复虚拟网络默认设置(在 ...

flex布局中，保持内容不超出容器的解决办法

flex布局中，保持内容不超出容器的解决办法相关推荐

最新文章

热门文章