在移动端单行文本在不同的屏幕下当文本过长时增加省略号效果

iphone5效果 :
这里写图片描述

iphone6Plus效果:
这里写图片描述

分析效果:
这里写图片描述

红:整行div样式,采用的是flex模式二端对齐;

蓝:左侧div样式,注意一定要设置一个overflow:hidden;属性,否则绿色的宽度会占整行,把按钮给挤跑掉;

浅蓝:右侧div样式,设置一个最小宽度 min-width,在flex中不设置左侧可能会伸缩模式下会挤压右铡的宽度,想只使用width的话,把蓝色的div增加一个 flex:1属性;这样会自动处理省下的空间;

绿:二个div采用float:left形式,宽度不能给一个固定的像素或百分比,所以分别给出 min-width and max-width属性的占比;
给出左侧二个小div的样式

  // 职位的工作地
      .city,
      .edu{
        float:left;
        min-width:10%;
        max-width:30%;
        text-overflow:ellipsis;
        white-space :nowrap;
        overflow: hidden;
      }
      .edu {
        max-width:70%;
      }

本着相互学习交流的理念,总结了遇到过的问题。如有不明白,欢迎留言资讯!

没有更多推荐了,返回首页