使用技巧

1.保持区域长宽比

//此处保持10:31.25长宽比
overflow:hidden
width: 100%
height: 0
padding-bottom: 31.25%

如果不保持长宽比，则在加载页面的时候，会出现布局的波动。

也可以使用

width: 100%
height: 31.25vm

但是兼容性不好

解释：
经过试验可以发现overflow: hidden只会隐藏超出边界的内容，而在height和padding的内容不会被隐藏

图中灰色区域的内容不会被隐藏.png

但要注意，不能直接将height设置为23.5%，因为height的百分比是相对于其父级元素的的，而padding和margin的百分比则是相对于父级元素的width。所以要使用padding实现固定长款比的元素。

  1. 将过长字符串隐藏并显示...
overflow: hidden
text-overflow: ellipsis
white-space: nowrap

如果在flex布局下的组件不能成功隐藏
可以在其中加一句 min-width: 0

.info{
  display: flex
  min-width: 0
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容