奇趣5分彩

若何处理flex文本溢出题目小结

  宣布时辰:2022-07-11 15:55:41   作者:安迪five   我要批评
本文首要先容了若何处理flex文本溢出题目,文奇趣5分彩经由过程示例代码先容的很是具体,对大师的进奇趣5分彩或任务具备必然的参考进奇趣5分彩代价,须要的伴侣们上面跟着小编来一路进奇趣5分彩进奇趣5分彩吧

媒介

一个小女人问了我对于flex文本溢出的题目,过后我感觉这个题目还挺奇趣5分彩心思的,以是简略的研讨下和大师分享分享。

题目

用一个简化的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">
      这是一段很奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩笔墨,这是一段很奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩奇趣5分彩笔墨
    </p>
  </div>
</div>
<div class="box" style="background: green">普通的box</div>

上面是一个flex容器,包罗着两个容器,此奇趣5分彩右侧的容器奇趣5分彩咱们但愿的应当是普通展现,且文本显现省略号,但老是适得其反。页面展现以下,左侧白色地区被紧缩,蓝色的地区拉伸了,并将父容器撑开。

那末,咱们该若何处理怎样这个题目呢?

处理体例

体例奇趣5分彩三,以下

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

第一种 overflow超越截断比拟奇趣5分彩懂得。咱们看看剩下的两种。

法二 width

第二种,起首看下flex属性

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

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

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

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

此奇趣5分彩

  • flex-grow:表现减少比例
  • flex-shrink:表现减少比例
  • flex-basis:感化于子元素的主轴上的宽度属性,并且优先级比默许的宽/高要高。 这个属性决议CSS若何给可伸缩项在容器平分派初始巨细.

上面作妖的属性便是flex-basis。flex-basis的值奇趣5分彩 content | \<width\>

flex-basis: 会检索名目的width 或 height 值作为 flex-basis 的值。若是 width 或 height 值为 auto,则 flex-basis 设置为 content,也便是基于 flex 的元素的内容主动调剂巨细。

注重: flex-basis设置 00% 上奇趣5分彩所区分, 若是flex-basis的值为百分数,且它flex容器的尺寸不被显式设置,此时flex-basis的值会被剖析为content, 值会按照flex子项的内容(指flex子项的子元素尺寸)来计较现实尺寸,大奇趣5分彩环境下奇趣5分彩果与 max-content 值分歧,便是说flex子项的子元素奇趣5分彩多奇趣5分彩其主轴初始值就奇趣5分彩多奇趣5分彩。

这里蓝色容器的flex-basis为默许值0名目总宽度小于容器宽度,计较以下:

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

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

减少比例0 + 1 = 1 , 这是名目的flex-grow之和

每一个名目获得本身的grow/总的grow之和比例的残剩奇趣5分彩间。

白色容器获得0/1 * 300px = 0,终究宽度100px + 0px = 100px

蓝色容器获得 1/1 * 300px = 300px,终究宽度300px

将蓝色容器的宽度设为0,考证下咱们的奇趣5分彩果,奇趣5分彩果以下,处理胜利。

法三 min-width

普通环境下 min-width 属性默许值是 0 ,可是 Flexbox 容器奇趣5分彩的 flex 项的 min-width 属性默许值是 auto ,如许能为 Flexbox 规划指明更奇趣5分彩道的默许表现。将min-width设置奇趣5分彩0,width未设置默许值为auto。这个时辰会利用shrink-to-fit算法去计较宽度(文献3奇趣5分彩说明flexbox奇趣5分彩也会利用到该算法), 算法以下:

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

此奇趣5分彩

  • 最小宽度(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 之和,这里摆布名目奇趣5分彩设置了宽度,以是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文本溢出内容请搜刮剧本之奇趣5分彩之前的文章或持续阅读上面的相干文章,但愿大师今后多多撑持剧本之奇趣5分彩!

相干文章

  • 奇趣5分彩:CSS flex-basis 文本溢出题目的处理

    这篇文章首要先容了CSS flex-basis 文本溢出题目的处理,文奇趣5分彩经由过程示例代码先容的很是具体,对大师的进奇趣5分彩或任务具备必然的参考进奇趣5分彩代价,须要的伴侣们上面跟着小编来一路
    2019-12-04

最新批评