當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文


CSS white-space用法及代碼示例

CSS中的空白屬性用於控製文本換行和white-spacing。此屬性中有多種類型的值可以使用。

用法:

white-space:normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

屬性值:


  • normal:這是此屬性的默認值。當CSS的空白屬性設置為normal時,兩個或多個white-spaces的每個序列都將顯示為單個空白。元素中的內容將在需要時進行包裝。
    用法:
    white-space:normal; 

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | white-space Property 
        </tile> 
        <style> 
            div { 
                width:500px; 
                height:500px; 
                white-space:normal; 
                background-color:limegreen; 
                color:white; 
                font-size:80px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div> 
                Geeks For Geeks:
                <br> 
                A Computer Science Portal For Geeks. 
            </div> 
        </center> 
    </body> 
      
    </html>

    輸出:

    具有正常值的空白屬性CSS

  • nowrap:當CSS的空白屬性設置為nowrap時,兩個或多個white-spaces的每個序列將顯示為單個空白。除非明確指定,否則元素中的內容不會換行。
    用法:
    white-space:nowrap; 

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | white-space Property 
        </tile> 
        <style> 
            div { 
                width:300px; 
                height:300px; 
                white-space:nowrap; 
                background-color:lightgreen; 
                color:black; 
                font-size:25px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div> 
                Geeks For Geeks:  
                A Computer Science Portal For Geeks. 
            </div> 
        </center> 
    </body> 
      
    </html>

    輸出:

    具有nowrap值的空白屬性

  • pre:此值使空格與HTML中的<pre>標簽具有相同的效果。僅當使用換行符指定時,元素中的內容才會換行。句法:
    white-space:pre; 

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | white-space Property 
        </tile> 
        <style> 
            div { 
                width:300px; 
                height:300px; 
                white-space:pre; 
                background-color:lightgreen; 
                color:black; 
                font-size:25px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div> 
                Geeks For Geeks:
                A Computer   science portal    for geeks. 
            </div> 
        </center> 
    </body> 
      
    </html>

    輸出:

    具有預值的空白屬性

  • 前行:當CSS的空白屬性設置為行前值時,兩個或多個white-spaces的每個序列將顯示為單個空白。元素中的內容將在需要時以及在明確指定時進行包裝。
    用法:
    white-space:pre-line; 

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | white-space Property 
        </tile> 
        <style> 
            div { 
                width:300px; 
                height:300px; 
                white-space:pre-line; 
                background-color:lightgreen; 
                color:black; 
                font-size:25px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div> 
                Geeks For Geeks:    A science portal for geeks. 
            </div> 
        </center> 
    </body> 
      
    </html>

    輸出:

    空格屬性的行前值

  • 預包裝:當CSS的空白屬性設置為前行值時,white-spaces的每個序列都將按原樣顯示。元素中的內容將在需要時以及在明確指定時進行包裝。
    用法:
    white-space:pre-wrap; 

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | white-space Property 
        </tile> 
        <style> 
            div { 
                width:300px; 
                height:300px; 
                white-space:pre-wrap; 
                background-color:lightgreen; 
                color:black; 
                font-size:25px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <center> 
            <div> 
                Geeks For Geeks:    A science portal for geeks. 
            </div> 
        </center> 
    </body> 
      
    </html>

    輸出:

    空格預包裝值

  • initial:此值將空白屬性設置為默認值。
    用法:
    white-space:initial; 
  • inherit:此值將空白屬性設置為父元素的值。
    用法:
    white-space:inherit; 

支持的瀏覽器:下麵列出了空白屬性支持的瀏覽器:

  • chrome :1.0
  • 邊:8.0
  • 的Firefox:3.5
  • Opera :9.5
  • Safari:3.0


相關用法


注:本文由純淨天空篩選整理自roshalmoraes大神的英文原創作品 CSS | white-space Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。