• 首頁 > 編程學習記錄 > white-space:nowrap實現讓文字不換行

    201511月15

    white-space:nowrap實現讓文字不換行

    作者:admin 0 Comments 發表評論

    今天寫超級購的CSS屬性,遇到個問題,就是在手機上顯示的時候,和電腦上顯示的不太相同,電腦上,說明文字和下方的表格都是全屏展示,但在手機上展示的時候,說明文字自動換行了:

    手機上的展示圖樣

    而我想文字也只顯示一點,跟表格一樣是往右拖再看后面的內容的!

    后面通過群里網友的指點,說是只要在樣式里添加上:

    white-space:nowrap

    屬性就可以了。測試以后,果然實現了效果,上面的說明文字不會再自動換行了。

    百度了下這個屬性的說明,很多說法,不過有一條應該是比較準確的:

    當你不想讓塊內的文字換行時,就可以用這個屬性。

    比如下面的例子:

    <!–當外層容器設置了寬度而你又不希望內層內容換行時–>
    <div style = ‘width:100px;’>
    <p style = ‘white-space:nowrap;’>
    神馬都是浮云神馬都是浮云神馬都是浮云神馬都是浮云神馬都是浮云神馬都是浮云神馬都是浮云
    </p>
    </div>

    因為設置了DIV塊的寬度為100像素,所以如果上面的代碼中,沒有“white-space:nowrap”這個樣式限制,那么里面的文字會因為寬度不夠而自動換行,但如果添加了這個樣式限制,那么就不會管DIV寬度的限制了,一直在一行顯示下去,如果不想讓超出DIV范圍的內容顯示,還要添加一個溢出樣式限制,比如:“overflow: hidden”。

    通過兩個圖來說明,第一幅是沒有添加“white-space:nowrap”限制的,第二幅是添加了“white-space:nowrap”樣式限制的:

    1圖2圖

    推薦閱讀相關文章:編程學習記錄

    本文地址:http://www.loveband.cn/white-spacenowrap.html
    版權所有 © 轉載時必須以鏈接形式注明作者和原始出處!

    本文目前尚無任何評論.

    發表評論

    广东11选5平台合法吗