本文說的white-space是一個(gè)控制換行和空白處理的CSS屬性 。我曾經(jīng)被這個(gè)屬性煩死 ， 一直沒記住 ， 今天決定還是寫下來好好琢磨下 。
屬性值normal
默認(rèn)值 ， 正常換行 ， 空白和換行符會(huì)被瀏覽器忽略 。啥意思呢？
正常換行的意思是 ， 單詞間會(huì)正常換行 ， 如果下一個(gè)單詞太長(zhǎng) ， 不足以在當(dāng)前行剩余部分完整展示 ， 則會(huì)在下一行顯示 。哪些情況算一個(gè)單詞呢？
一個(gè)中文字// 這是兩個(gè)單詞Tusi Blog// 這只算一個(gè)單詞TusiBlog連續(xù)的數(shù)字或符號(hào)也只算一個(gè)單詞
一個(gè)英文單詞
// 這只算一個(gè)單詞 ， 如果超長(zhǎng)也不會(huì)換行 ， 會(huì)擠出橫向滾動(dòng)條10000000000000000000000+2000000000000000000*200000000000000空白和換行符會(huì)被瀏覽器忽略 。就是你輸入連續(xù)的空格 ， 只會(huì)表現(xiàn)出一個(gè)空格的效果；如果敲了回車 ， 也不會(huì)換行 。
<!-- 代碼 --><div>00000000 00000000000000000></div><!-- 實(shí)際效果 -->00000000 00000000000000000pre
行為方式類似HTML中的pre標(biāo)簽 。pre標(biāo)簽一般用來包裹源代碼 。
不會(huì)自動(dòng)換行（想想 ， 你寫代碼時(shí) ， 不回車會(huì)換行嗎？） ， 除非在文本中遇到換行符（敲了回車）或使用了br標(biāo)簽 。
空白會(huì)被瀏覽器保留 。意思就是連續(xù)的空格會(huì)被保留 ， 不會(huì)合并成一個(gè) 。
nowrap- 不換行 ， 內(nèi)容再多也不換行 。
- 忽略換行符 ， 也就是說回車也不會(huì)換行 ， 直到遇到br標(biāo)簽為止 。
- 正常換行
- 連續(xù)的空白符會(huì)被保留
- 換行符（回車）也是有效的
- 正常換行
- 連續(xù)空白符會(huì)被合并成一個(gè)
- 換行符（回車）也有效
繼承父元素的white-space屬性值
總結(jié)【教你css設(shè)置文字不換行顯示 css文本不換行加省略號(hào)】可以從幾個(gè)方面來對(duì)比下這幾種屬性值的差異 。
推薦閱讀
- 蛀牙痛怎么快速止痛,蛀牙疼怎么辦教你立刻止疼,蛀牙如何止痛
- 行李箱密碼設(shè)置步驟 行李箱密碼設(shè)置步驟簡(jiǎn)述
- 教你如何制作規(guī)范的流程圖 流程圖標(biāo)準(zhǔn)規(guī)范是什么
- 屏幕大小怎么調(diào)整，設(shè)置電腦屏幕比例方法
- 教你如何優(yōu)化網(wǎng)站關(guān)鍵詞 網(wǎng)站關(guān)鍵詞優(yōu)化的方法
- 顯示器設(shè)置最佳參數(shù) 電腦怎么設(shè)置屏幕分辨率
- 腳出汗酸臭味怎么辦 幾招教你解決臭汗腳
- 蘋果x開關(guān)機(jī)操作技巧 iphonex如何開機(jī)設(shè)置
- macbook系統(tǒng)更新設(shè)置 macbook系統(tǒng)更新在哪里設(shè)置
- 設(shè)置交換機(jī)ip地址的方法 如何配置交換機(jī)ip地址