详解flex合理布局中维持內容不超过器皿的处理方

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

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

在挪动端,flex 合理布局很功能强大,它可以依据机器设备宽度来全自动调剂器皿的宽度,用起来很便捷,早已愈来愈离不开它,可是近期在做新项目的情况下发现1个难题。

便是在1个设定了 flex:1 的器皿中,假如文本很长,这时候候文本就会超过器皿,而并不是呆在设定好的动态性剩下的室内空间中。因为具体新项目的较为繁杂,不太好拿出来讲,这里就把难题简化叙述以下:

大概是有1个main器皿是flex合理布局,左侧1个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将会会十分长,1些机器设备下必须掩藏显示信息,即不换行,并留下省略符…作标识。

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

尝试撤销父元素.content的flex: 1,失效。
尝试撤销.main器皿的display: flex,省略号出現。

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

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

.content {
    flex: 1;
    width: 0;
}

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

.content {
    flex: 1;
    overflow: hidden;
}

上面的2种方式都可以以做到大家必须的实际效果,即给 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维持內容不超过器皿內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!