flex模式文字溢出问题

方案1:问题:使用flex布局,左边自适应,右边固定 

左边的文字太长了,需求是显示一行,超长显示… 

一般做法:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap; 
但是这个做法的前提是固定宽度,比如width:200px

现在左边是自适应,使用的方法是父元素加上:max-width: calc(100% - 120px);

然后给它本身增加一个width:100% 

flex模式文字溢出问题_第1张图片

方案2:



a namea namea namea namea

b namea namea namea namea

c namea

flex模式文字溢出问题_第2张图片

以上的盒子都是固定的长度,如果你想设置不同的长度,就分开改各自的flex属性即可。



a namea namea namea namea

b namea namea namea namea

c namea

flex模式文字溢出问题_第3张图片

你可能感兴趣的:(flex模式文字溢出问题)