white-space:nowrap 的妙用

qqlcbb 发布于2019-08-30 12:55 / 1236人阅读

摘要：对于多个元素同在同一行的布局，如比较常见的是轮播。因此最好显式设置的垂直方向上的对齐。做法一的案例有淘宝首页的主轮播通过子元素浮动，父元素清除浮动。可看出这与与应用了的文本容器效果一样。上的效果，应该也一样。

对于多个元素同在同一行的布局，如比较常见的是轮播。下面我将探讨这这一布局的做法：
首先约定html结果如下：

div.row
  div.col
  div.col
  div.col
  ...

做法一：

设定div.row的宽度为div.col宽度*div.col的个数，然后设置div.col为float:left或display:inline-block
对于 float:left, div.row 需要清除浮动。
对于 display:inline-block，需要压缩html或者为div.row设置 font-size:0 以去除 div.col 之间的水平间隙，后者也顺便去除了垂直方向的间隙（line-height为相对单位时，其最终值为line-height值*font-size）。对于前者，还有垂直方面的间隙未去除，我们可以为div.col设置 vertical-align:top 或为div.row设置 line-height:0。推荐前者（即vertical-align），因为当 div.col 高度不相等时，会按顶部对齐，当然你也可以bottom或middle。而且，如果div.col内含有行内元素或inline-block元素时，div.col会按其子元素最后一行inline/inline-block元素的基线进行垂直方向上的对齐（vertical-align默认值是baseline）。因此最好显式设置div.col的垂直方向上的对齐。

baseline基线

水平与竖直方向上的间隙

按其子元素最后一行inline/inline-block元素的基线进行垂直方向上的对齐

这也符合张鑫旭老师的《CSS深入理解vertical-align和line-height的基友关系》这篇文章讲到的：一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

补充知识：line-height的值为数字与百分比的区别

百分比是当前元素的字体大小*百分比，算出的值让后代元素继承（固定值，后代元素均用此值）；而数字是让后代元素的字体大小*数值（相对值，后代元素根据自身字体大小算出适合的行高）。具体可以看《深入了解css的行高Line Height属性》。

当然，如果div.row内有行内元素或inline-block元素，它们会继承父元素的font-size与line-height，因此需要重新设置font-size和line-height，以覆盖div.row对应的值。

做法一的案例有：淘宝首页的主轮播（通过子元素浮动，父元素清除浮动）。
这种做法的好处有：①兼容性好，无须清除div.col直接的间隙，因为浮动后的元素会一直与当前行框（line box）顶部对齐，vertical-align对齐无效。
不好的地方：要计算div.row的宽度。

做法二（这也是我想讲的巧妙）

直接上代码：

*{
    margin: 0;
    padding: 0;
}
.row{
    white-space: nowrap; // 让div.col放置在同一行
    background-color: rgb(0,0,0); // 背景色，以方便观察
    font-size: 0; // 去除水平+垂直间隙
}
.col{
    display: inline-block;
    *display: inline; // 兼容IE 6/7，模拟inline-block效果
    *zoom: 1; // 兼容IE 6/7，模拟inline-block效果
    width: 20%; 
    margin-right: 30px;
    height: 100px;
    background-color: red;
    font-size: 14px; // 覆盖父元素的font-size
    vertical-align: top; // 向上对齐，同时去除垂直间隙
}

黑色背景是div.row，红色背景是 div.col。

可看出这与与应用了white-space:nowrap的文本容器效果一样。

做法二的好处有：

①兼容性好（IE5都正常），无须计算宽度，可任意放多个 div.col，而 div.row 的宽度等于其父元素的宽度（但IE6则会将div.row撑大，在IE6中，width如同min-width效果，height也是）。

IE5上的效果，IE6应该也一样。

如果你还有其它想法，欢迎大家在评论处告诉我哦。

github-JChehe。
静态博客 <- 小心这心机婊

GPU云服务器云服务器获取oss的object的链接地址的方法云计算的的发展云计算的特征的是一个机柜的的价格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115174.html

flex布局遇到white-space:nowrap怎么超出一行显示省略号

摘要：后两个属性可选，该属性有两个快捷值和。属性定义了项目的缩小压缩比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。当我们设置，项目控件由于不能计算多余的空间导致无法收缩了。写在最前：当flex遇到white-space:nowrap，你知道怎么破局吗？切图带你分析原理，三个方案任意选择！一、场景： showImg(https://segm...

tylin 2019-08-30 15:44 评论0 收藏0
【bug库】Safari浏览器white-space:nowrap不生效

摘要：复现验证浏览器显示例子蓝天白云花朵浏览器显示例子蓝天白云花朵总结文本不会换行，文本会在同一行上连续，直到遇到标签位置浏览器没有对属性生效疑问为什么在浏览器中没有生效呢问题描述：上传一个关键词csv文件，以换行符为分割点，上传后将文件内容展示在页面上，在safari浏览器下显示结果异常，关键词都在一行显示，没有换行排查原因：代码里不知怎么添加了white-space:nowra...

only_do 2019-08-30 15:56 评论0 收藏0
display: flex;’布局下使用‘white-space: nowrap;’导致的问题

摘要：需求在中实现布局预期效果为左侧一个正圆形的用户头像，右侧的上方为该用户昵称下方为个性签名单行显示，超出实际能显示的最大宽度则用代替。解决办法在的父布局中添加样式即可解决。需求：在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图： showImg(https://segment...

waruqi 2019-08-02 16:17 评论0 收藏0
display: flex;’布局下使用‘white-space: nowrap;’导致的问题

摘要：需求在中实现布局预期效果为左侧一个正圆形的用户头像，右侧的上方为该用户昵称下方为个性签名单行显示，超出实际能显示的最大宽度则用代替。解决办法在的父布局中添加样式即可解决。需求：在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图： showImg(https://segment...

caspar 2019-08-30 10:51 评论0 收藏0