flex合理布局完成左边文本外溢省略右边文本自融

日期:2020-10-15 类型:科技新闻 

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

要想完成1个左边文本能够依据文本长短全自动调剂宽度,当1行显示信息不下时,不挤压右边文本室内空间,左边文本外溢省略。同应当右边文本变长的情况下,右边文本全显示信息,左边文本被挤压后外溢省略的实际效果。我说的将会并不是很清晰,让大家看看实际效果图吧。

1.右边文本是是多少便是多宽,左边默认设置占有剩下的全部室内空间。

2.右边文本是是多少便是多宽,和11样。左边文本很长很长外溢省略。

3.左边文本和21样,右边文本给他加了两个right。

下面上款式:

.footer {
  width: 300px;
  height: 20px;
  display: flex;
  overflow: hidden;
}
.left {
  background: #3cc8b4;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 50px;
}
.right {
  background: #9bc;
  max-width: 250px;
}
.right-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="footer">
   <div class="left">
     leftleftleftleftleftleftleftleftleftleftleftleftleft
  </div>
  <div class="right">
    <div class="right-ellipsis">
      rightrightrightrightrightrightrightrightright
    </div>
  </div>
</div>

编码中多加了max-width、min-width和叫right-ellipsis的div。来做到以下实际效果:

大伙儿依据必须能够完成不一样要求的实际效果了。设计方案要求总结:左边宽度全自动提高,右边宽度全自动提高而且不能外溢省略。当左边文本长度超过的情况下,左边文本外溢省略。实际效果以下:

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