一般使用flex布局:
如果是横向的,就不加宽度,不然超出后默认会横向压缩
如果是纵向的,就不加高度,不然超出后默认会纵向压缩
但是,你也可以使用 flex-shrink
这个属性来控制,如果空间不足的时候,不让它自动压缩。
flex-shrink
默认是1,表示空间不足的时候自动进行压缩;设置为0的时候,表示空间不足时,不让它进行压缩。
相对应的属性flex-grow
是控制剩余空间的,默认是0;表示如果存在剩余空间,也不进行放大flex项目。
为什么会写这个?
因为再写项目的时候,有控制文字两行溢出显示的。
本来两行文本溢出的css是这样的:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
文字上方的图片与文字在一个flex容器中,而且对这个flex容器设置了固定高度。
其中有个手机,两行文字有一部分被遮住,使用高度与行高控制也达不到设计稿上的样式(高度是行高的两倍)。