flex合理布局被子元素撑开怎样维持內容不超过器

日期:2021-02-28 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

挪动端里边,flex 合理布局很功能强大,它可以依据机器设备宽度来全自动调剂器皿的宽度,可是近期在做新项目的情况下发现1个难题:

1个li里边设定了flex,flex: 0 0 33.333%,随后想让子元素里边的文本超过flex界定宽度后全自动省略。

<li>
    <a href="">
        <img src="https://img30.360buyimg.com/focus/s140x140_jfs/t13411/188/926813276/3945/a4f47292/5a1692eeN105a64b4.png" alt=""> 
        <p>小米小米小米小米小米小米小米小米小米小米小米小米</p>
    </a>
</li>
ul{
     display: flex;
}
li{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    text-align: center;
    padding: 0 1.333vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 2.667vw;
}
li p{
    font-size: 3.2vw;
    color: #8F8E94;
    text-overflow: ellipsis;
    white-space: nowrap;
}

这时候候会发现,p的文本将会会十分长,1些机器设备下必须掩藏显示信息,即不换行,并留下省略符…作标识。

这里会发现text-overflow: ellipsis不起效,省略符压根沒有出現。并且由于设定了 nowrap 会发现文本会将 content 撑开,致使內容超过了显示屏。因此务必要处理这个难题。

尝试撤销父元素.li的flex: 0 0 33.33%,失效。

尝试撤销ul器皿的display: flex,省略号出現。

因而猜想是flex合理布局的难题,进1步猜想省略符必须对父元素限制宽度。

尝试对父元素li设定width: 100%失效,可是设定width: 0可行。即:

li{
    flex: 0 0 33.333%;
    width: 0
}

假如不设定宽度,li能够被子连接点无尽撑开;因而p总有充足的宽度在1行内显示信息全部文字,也就不可以开启断开省略的实际效果。检测也有1种方式能够做到实际效果:

li{
    flex: 0 0 33.333%;
    overflow: hidden;
}

上面的2种方式都可以以做到大家必须的实际效果,即给 li 设定了 flex 的值 的情况下,它会动态性的得到父器皿的剩下宽度,且不容易被自身的子元素把內容撑开。

  • 给html, body设定max-width,元素好像能强行撑开页宽;
  • 给body设定overflow,页宽不可以被撑开了,但元素宽度还在,即元素自身還是外溢;
  • 给html, body另外设定max-width和overflow,页宽限制在max-width内,元素自身還是外溢;
  • 给.main器皿设定overflow: hidden,同理.main是不外溢了,.notice自身還是外溢;
  • 给.notice元素设定width或max-width,尽管宽度受到限制,但在特殊宽度下省略符…显示信息不全,有时只显示信息两个点..

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。