white-space:nowrap 的妙用

qqlcbb 發布于2019-08-30 12:55 / 1438人閱讀

摘要：對于多個元素同在同一行的布局，如比較常見的是輪播。因此最好顯式設置的垂直方向上的對齊。做法一的案例有淘寶首頁的主輪播通過子元素浮動，父元素清除浮動。可看出這與與應用了的文本容器效果一樣。上的效果，應該也一樣。

對于多個元素同在同一行的布局，如比較常見的是輪播。下面我將探討這這一布局的做法：
首先約定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的鏈接地址的方法云計算的的發展云計算的特征的是一個機柜的的價格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/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