HTML5文本 描述性信息 預(yù)定義格式

預(yù)定義文本就是可以保持文本固有的換行和空格。使用pre元素可以定義預(yù)定義文本。

■實(shí)例設(shè)計(jì)

下面使用pre顯示CSS樣式代碼，顯示效果如圖所示。

<pre> 

pre {

    margin: 20px auto; 

    padding: 20px;

    background-color: #aea8a8; /*根據(jù)自己需要修改背景底色顏色*/

    white-space: pre-wrap; 

    word-wrap: break-word; 

    letter-spacing: 0; 

    font: 14px/26px 'courier new'; 

    position: relative; 

    border-radius: 4px;

}

</pre>

    預(yù)定義文本默認(rèn)以等寬字體顯示，可以使用CSS改變字體樣式。如果要顯示包含HTML元素的內(nèi)容，應(yīng)將包圍元素名稱的“<”和“>”分別改為其對(duì)應(yīng)的字符實(shí)體&lt;和&gt;。

    ■小結(jié)

    pre默認(rèn)為塊顯示，即從新一行開始顯示，瀏覽器通常會(huì)對(duì)pre文本關(guān)閉自動(dòng)換行，因此，如果包含很長(zhǎng)的單詞，就會(huì)影響頁面的布局或產(chǎn)生橫向滾動(dòng)條。使用下面CSS樣式可以對(duì)pre包含內(nèi)容打開自動(dòng)換行。

    pre {white-space: pre-wrap;}