css强制不换行的(white-space:nowrap)!坑

前阵子公司商城项目重构!写到一个商品展示列表,要分左右的还可以滑动的,这样一个商品列表!

一般可能都会用到white-space:nowrap,这个属性强制的让子层不换行!

但是他这里会有个坑,连带着子层的子层也会受到影响!

实例

而实际想要的是,只是子层强制不换行,子层的子层应该就不再受这个影响才对。

实例

在网受搜索了很久都没有一个例子是解决的办法,最后还是自己去看white-space的属性值是有哪些?

属性值

我直接在子层添加,per-wrap的属性之后,子层的子层就不再受nowrap的影响,完美的解决,我的需求

你可能感兴趣的:(css强制不换行的(white-space:nowrap)!坑)