当前位置: 首页 > Web前端 > HTML5

巧妙地使用flex布局,实现左边文字的溢出和省略,右边文字的自适应

时间:2023-04-05 23:22:38 HTML5

想实现左边的文字可以根据文字的长度自动调整宽度。当一行无法显示时,右边的文本空间不会被挤压,左边的文本会溢出而被省略。同理,当右边的文字变长时,右边的文字被完全显示,左边的文字被挤压溢出省略的效果。说的可能不是很清楚,我们来看效果图。1.右边的文字尽可能宽,左边默认占据所有剩余空间。2.右边的文字一样宽,和1一样。左边的文字很长,溢出省略了。3、左边的文字同2,右边的文字加两个右。这是样式:.footer{width:300px;高度:20px;显示:弹性;溢出:隐藏;}.left{背景:#3cc8b4;弹性:11自动;溢出:隐藏;文本溢出:省略号;空白:nowrap;最小宽度:50px;}.right{背景:#9bc;max-width:250px;}.right-ellipsis{overflow:hidden;文本溢出:省略号;空白:nowrap;leftleftleftleftleftleftleftleftleftleftleftleft

rightrightrightrightrightrightrightrightrightrightrightrightright
代码添加了max-width、min-width和一个名为right-ellipsis的div。实现如下效果:大家可以根据自己的需要实现不同需求的效果。设计需求总结:左侧宽度自动增加,右侧宽度自动增加,溢出不能省略。当左侧文本长度超过时,左侧文本溢出并被省略。效果如下: