跟高老師學(xué)習(xí)Web前端之27.

昨天家里電燈泡壞了,書房里面黑漆漆的,我沒有“挑燈夜讀”的習(xí)慣,所以昨天就早早休息了,拉下的功課今天來補(bǔ)充。

今天開始學(xué)習(xí)文本的white-space樣式,主要屬性是:設(shè)置或檢索對(duì)象內(nèi)空格的處理方式。

代碼書寫

具體說明:

今天主要學(xué)習(xí)了文本內(nèi)空格處理的四種方式:pre、nowrap、pre-wrap、pre-line。

pre:主要是指不合并文字間的空白間隙,當(dāng)文字超出邊界時(shí)不換行;

nowrap:主要是指合并文本間的多余空白直到文本結(jié)束或者遭遇<Br/>換行;

pre-wrap:主要指不合并文本間的空白距離,當(dāng)文字碰到邊界時(shí)發(fā)生換行;

pre-line:主要指保持文本的換行,不保留文字間的空白距離。

在此提醒一點(diǎn):border屬性后面不需要書寫分號(hào),這是其本身屬性。

頁面展示

從頁面展示可以看出,pre與pre-wrap屬性的不同點(diǎn)在于,當(dāng)文本超出邊界時(shí)是否發(fā)生換行,pre不換行,pre-wrap則換行。nowrap與pre-line二者均合并文本間的多余空白,但是nowrap不換行,或者遭遇<br/>換行標(biāo)簽時(shí)換行,而pre-line標(biāo)簽則保持文本的換行。

晚安!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,191評(píng)論 1 4
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接 關(guān)注公眾號(hào)獲取更多資訊 這篇文章主要總結(jié)H5的一些新增的功能以及一些基礎(chǔ)歸納,這里只是一個(gè)提...
    前端進(jìn)階之旅閱讀 9,213評(píng)論 22 225
  • CSS3中的word-wrap、word-break、white-space想必大家都接觸過,今天我們來一起溫故而...
    叮咯嚨咚DQ閱讀 625評(píng)論 0 0
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,181評(píng)論 0 1
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,111評(píng)論 0 2

友情鏈接更多精彩內(nèi)容