成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

文字處理之一：空白字符及white-space屬性

Edison / 1580人閱讀

摘要：瀏覽器的默認(rèn)行為瀏覽器支持種空白字符空格制表符回車換行。關(guān)于換行的具體細(xì)節(jié)在下一篇博客介紹，這里我們簡(jiǎn)單點(diǎn)，只考慮中文字符，字?jǐn)?shù)多了放不下就換一行。

p標(biāo)簽中插入一段文字，是非常常見的需求，但是仔細(xì)分析，這里面有很多需要注意的細(xì)節(jié)。這篇和下篇博客，主要講對(duì)于文本內(nèi)容顯示的處理，這篇主要介紹空白字符和white-space屬性。

瀏覽器的默認(rèn)行為

瀏覽器支持4種空白字符：空格、制表符、回車、換行。默認(rèn)情況下，有以下幾點(diǎn)：

所有的空白字符，都會(huì)當(dāng)成空格處理

Hello 
  World

hello world之間加了一個(gè)換行符，但是最后顯示的效果如下：

插入的是換行符，但是最后顯示的時(shí)候變成了空格。這也就說明，如果我們有兩段文字，在一個(gè)p標(biāo)簽內(nèi)并不會(huì)保留換行符。要想實(shí)現(xiàn)換行效果，要么用兩個(gè)p標(biāo)簽，要么用
來?yè)Q行。

頭尾的空白符會(huì)直接忽略

  hello  world

在頭部和尾部都有空格，但最后顯示時(shí)，兩邊的空格會(huì)直接忽略。如果頭尾是換行，也會(huì)被忽略掉。為什么要這樣做呢，比如我們寫代碼的時(shí)候，為了結(jié)構(gòu)清晰通常喜歡排版一下：


   hello 
    world

最后的顯示效果如下：

p標(biāo)簽內(nèi)部首尾的兩個(gè)換行符都會(huì)直接忽略，使得我們排版帶來的空白字符就不會(huì)影響最后顯示的效果。span標(biāo)簽內(nèi)部首尾的空格也會(huì)被忽略，所以，不要指望在span包裹的hello之后和world之前加入空格來增加兩者間距。

多個(gè)空格會(huì)被合并

這一點(diǎn)應(yīng)該比較熟悉，我在hello和world之間插入100個(gè)空格，也只會(huì)顯示一個(gè)而已。那么如果我想插入多個(gè)空格呢，就只能用到字符實(shí)體這種東西了，也就是 。

Hello      World


Hello     World

white-space屬性

瀏覽器的這種默認(rèn)行為，為我們提供了很多便利，也符合我們的日常需求，比如代碼的排版不會(huì)對(duì)展示產(chǎn)生過多影響。但是，這種默認(rèn)行為也并不總是符合我們的需求。如果需要改變，可以通過white-space屬性來實(shí)現(xiàn)，顧名思義，這個(gè)屬性就是控制空白字符的，同時(shí)，他也會(huì)對(duì)瀏覽器的默認(rèn)換行行為有一些影響。

white-space:normal，這是默認(rèn)值，也就是瀏覽器的默認(rèn)行為。除了上面提到的空白字符的處理外，當(dāng)文字在一行放不下時(shí)，瀏覽器還會(huì)自動(dòng)換行。關(guān)于換行的具體細(xì)節(jié)在下一篇博客介紹，這里我們簡(jiǎn)單點(diǎn)，只考慮中文字符，字?jǐn)?shù)多了放不下就換一行。

文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多

最后顯示的效果如下：

white-space:nowrap：所謂wrap，翻譯成中文就是包裹，在CSS里面，我們可以理解成當(dāng)一行放不下時(shí)，為了讓他不超出容器，瀏覽器就要給文字換行，將文字包裹起來。那么nowrap就是不包裹，也就是文字超出就超出吧。

文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多

最后顯示的效果如下：

white-space:pre：我希望我寫的格式就是最終展示的瀏覽器，瀏覽器不做任何處理，那就用這個(gè)值，或者用

標(biāo)簽也一樣的效果


    文字有點(diǎn)多文字有點(diǎn)多
  
  文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多
  
  
  
  文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多


最后顯示的效果如下：




我在開頭加的空格沒有被忽略，中間加的換行符也沒有被當(dāng)成空格，甚至多個(gè)換行符也沒有被合并，第二行超長(zhǎng)了也沒有自動(dòng)換行?？傊?，瀏覽器沒有做任何處理。






white-space:pre-wrap：pre的效果看來有點(diǎn)太粗暴了，我還需要wrap包裹一些，也就是在pre的基礎(chǔ)上希望自動(dòng)換行。


    文字有點(diǎn)多文字有點(diǎn)多
  
  文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多
  
  
  
  文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多


最后顯示的效果如下：








white-space:pre-line：line是一行的意思，加上line代表我更加強(qiáng)調(diào)換行，所以我就保留換行符，并且保留瀏覽器的wrap換行，這兩個(gè)都是跟換行相關(guān)的?？崭襁€是該合并合并，該忽略忽略，不跟pre一樣搞了。


    文字有點(diǎn)多文字有點(diǎn)多
  
  文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多
  
  
  
  文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多文字有點(diǎn)多


最后顯示的效果如下：






總結(jié)一下

這個(gè)屬性其實(shí)控制的是三點(diǎn)：



換行符是否當(dāng)成空格處理


多個(gè)空格是否合并，收尾空格是否忽略


是否自動(dòng)換行



每個(gè)屬性對(duì)應(yīng)的行為也就是下面的表





 
換行符
空格符的合并及忽略
自動(dòng)換行





normal
當(dāng)成空格，并且合并
合并
是




nowrap
當(dāng)成空格，并且合并
合并
否




pre
保留
保留
否




pre-wrap
保留
保留
是




pre-line
保留
合并
是






關(guān)于換行，也還是有很多細(xì)節(jié)的，下一篇詳聊~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116351.html

相關(guān)文章

  • 【芝士整理】CSS基礎(chǔ)圖譜

    摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...

    iOS122 評(píng)論0 收藏0

  • 14 ,CSS 文字與文本

    1.CSS 中長(zhǎng)度與顏色 2.CSS 中的文字屬性 3.CSS 中的文本屬性 14.1 CSS 中長(zhǎng)度與顏色 長(zhǎng)度單位 說明 in 英寸 cm 公分 mm 公里 cm 以目前字體高度為單位 ex 以小寫字母高度為單位（大部分不支持） pt 1pt/72英寸 pc 1pc/12pt px 像素（推薦使用） 顏色單位： 說明 十六進(jìn)制 如：color:#ff0000 顏色名稱 如：color:red ...

    blankyao 評(píng)論0 收藏0

  • css文本屬性

    摘要：的區(qū)別指字母間距，對(duì)英文和漢字，空格都有效，也可以叫字符間距。指單詞間距，對(duì)漢字不支持。時(shí)的效果壓縮空白和換行符，排滿不換行?？v向長(zhǎng)度，可為負(fù)值，向下為正。陰影的模糊長(zhǎng)度。的使用有了文字描邊，就有文字填充色。 1. letter-spacing,word-spacing,white-space的區(qū)別 letter-spacing指字母間距，對(duì)英文和漢字，空格都有效，也可以叫字符間距。 ...

    Tony_Zby 評(píng)論0 收藏0

  • css文本換行總結(jié)

    摘要：到文本過長(zhǎng)的問題，元素的寬度不足以容那文本的內(nèi)容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我將會(huì)介紹幾種種常用的換行方法。但文本內(nèi)的換行無(wú)效。 到文本過長(zhǎng)的問題，元素的寬度不足以容那文本的內(nèi)容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我...

    Caizhenhao 評(píng)論0 收藏0

  • CSS魔法堂："那不是bug，是你不懂我!" by inline-block

    摘要：那不是，是我不懂而已。的用途之一西文是以空格來分隔單詞的，而漢字間則無(wú)需空格分隔，但為了統(tǒng)一西文東亞和的排版，于是抽象出一個(gè)名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語(yǔ)言信息。 前言 每當(dāng)來個(gè)需要既要水平排版又要設(shè)置固定高寬時(shí)，我就會(huì)想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發(fā)...

    cucumber 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<