如何解决flex文本溢出问题小结


Posted in HTML / CSS onJuly 15, 2022

前言

一个小姑娘问了我关于flex文本溢出的问题,事后我觉得这个问题还挺有意思的,所以简单的研究下和大家分享分享。

问题

用一个简化的css和html为例

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {
    display: flex;
    height: 200px;
    margin-top: 20px;
    width: 400px;
    margin: 20px auto 0 auto;
  }
  .left {
    width: 100px;
    height: 100%;
    background: red;
  }
  .right {
    flex: auto;
    height: 100%;
    background: blue;
    color: #fff;
  }
  .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

<div class="box">
  <div class="left">123</div>
  <div class="right">
    <p class="text">
      这是一段很长长长长长长长长长长长长长长长长长长文字,这是一段很长长长长长长长长长长长长长长长长长长文字
    </p>
  </div>
</div>
<div class="box" style="background: green">正常的box</div>

上面是一个flex容器,包括着两个容器,其中右边的容器中我们希望的应该是正常展示,且文本显示省略号,但总是事与愿违。页面展示如下,左边红色区域被压缩,蓝色的区域拉伸了,并将父容器撑开。

如何解决flex文本溢出问题小结

那么,我们该如何解决怎么这个问题呢?

解决方法

方法有三,如下

  • 蓝色容器设置 overflow: hidden
  • 蓝色容器设置 width: 0
  • 蓝色容器设置 min-width: 0

第一种 overflow超出截断比较好理解。我们看看剩下的两种。

法二 width

第二种,首先看下flex属性

<!-- 缩写 -->
flex: auto; 

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

<!--默认值为-->
flex: 0 1 auto;

flex: auto是flex: 0 1 auto的缩写

其中

  • flex-grow:表示放大比例
  • flex-shrink:表示缩小比例
  • flex-basis:作用于子元素的主轴上的宽度属性,并且优先级比默认的宽/高要高。 这个属性决定CSS如何给可伸缩项在容器中分配初始大小.

上面作妖的属性就是flex-basis。flex-basis的值有 content | \<width\>

flex-basis: 会检索项目的width 或 height 值作为 flex-basis 的值。如果 width 或 height 值为 auto,则 flex-basis 设置为 content,也就是基于 flex 的元素的内容自动调整大小。

注意: flex-basis设置 00% 上有所区别, 如果flex-basis的值为百分数,且它flex容器的尺寸没有被显式设置,此时flex-basis的值会被解析为content, 值会根据flex子项的内容(指flex子项的子元素尺寸)来计算实际尺寸,多数情况下效果与 max-content 值一致,就是说flex子项的子元素有多长其主轴初始值就有多长。

这里蓝色容器的flex-basis为默认值0项目总宽度小于容器宽度,计算如下:

项目总宽度100px + 0px = 100px

待分配宽度400px - 100px = 300px

放大比例0 + 1 = 1 , 这是项目的flex-grow之和

每个项目得到自身的grow/总的grow之和比例的剩余空间。

红色容器得到0/1 * 300px = 0,最终宽度100px + 0px = 100px

蓝色容器得到 1/1 * 300px = 300px,最终宽度300px

将蓝色容器的宽度设为0,验证下我们的结果,结果如下,解决成功。

如何解决flex文本溢出问题小结

法三 min-width

一般情况下 min-width 属性默认值是 0 ,但是 Flexbox 容器中的 flex 项的 min-width 属性默认值是 auto ,这样能为 Flexbox 布局指明更合理的默认表现。将min-width设置成0,width未设置默认值为auto。这个时候会使用shrink-to-fit算法去计算宽度(文献3中说明flexbox中也会使用到该算法), 算法如下:

width = min(max(preferred minimum width, available width), preferred width)

其中

  • 最小宽度(preferred minimum width)也就是min-width
  • 可用宽度(available width) ,这个宽度为包含块减去margin、border、padding以及所有相关滚动条的宽度。
  • 发生明确的换行外不发生换行的时 首选宽度(preferred width) 即content-box的宽度

那么计算如下: (816是当时浏览器获取的宽度)

min(max(0, 400px - 100px), 816px) = 300px

所以,设置最小宽度也能解决我们的问题。

flex再算一题

html的内容如下,我们需要计算左右两个容器的宽度。

<style>
  .box {
    display: flex;
    height: 200px;
    margin-top: 20px;
    width: 400px;
    margin: 20px auto 0 auto;
  }
  .item-1 {
    background: red;
    width: 200px;
    flex-shrink: 2;
  }
  .item-2 {
    background: blue;
    width: 300px;
    flex-shrink: 3;
  }
</style>
<div class="box">
  <div class="item-1">设置200px,实际169.23</div>
  <div class="item-2">设置300px,实际230.77</div>
</div>

开始计算,此时项目总宽度超过父容器时,这个时候需要使用flex-shrink计算

  • 先要去计算项目的虚拟总宽度Total = 各项目flex-basic * flex-strink 之和,这里左右项目都设置了宽度,所以flex-basis=width
  • 再计算单个项目的占比P = flex * flex-strink / Total
  • 最后计算项目应该减去的大小 = 真实超出部分 * P

Total = 200 * 2 + 300 * 3 = 1300

P1 = 200 * (2 / VS)

P2 = 300 * (3 / VS)

最终得出:

item-1的宽度为:200 - (500 - 400) * P1 = 169.23px

item-2 的宽度为:300 - (500 - 400) * P2 = 230.77px

如何解决flex文本溢出问题小结

参考文献

到此这篇关于如何解决flex文本溢出问题小结的文章就介绍到这了,更多相关flex文本溢出内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
使用CSS定位HTML元素的实现方法
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 #HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 #HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 #HTML / CSS
CSS SandBox应用场景及常见问题
CSS的calc函数用法小结
Jun 25 #HTML / CSS
You might like
PHPAnalysis中文分词类详解
2014/06/13 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
详解webpack运行Babel教程
2018/06/13 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python之PyMongo使用总结
2017/05/26 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
C++的几个面试题附答案
2016/08/03 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
客服专员岗位职责范本
2013/11/29 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
员工担保书范本
2015/09/22 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android