CSS樣式裡pre是什麼？ HTML中pre自動換行code標籤作用

我們用WordPress建立站需要學習一些CSS 和HTML的基礎知識：

• 由於某些WordPress主題的CSS樣式文件，並沒有加入pre 和 code 標籤樣式。
• 大多數瀏覽器目前支持標記。

HTML  標籤示例

以下是pre 標籤的CSS樣式（能讓html代碼自動換行）▼

pre {
border: 1px solid #d1d1d1;
line-height: 190%;
margin: 0 0 1.75em;
max-width: 100%;
overflow: auto;
padding: 15px;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

以下是code 標籤的CSS樣式 ▼

code {
background: #f1f1f1;
color: #555;
margin: 0 2px;
padding: 2px 4px;
border-radius: 2px;
}

使用方法：

• 請將以上CSS標籤，複製到WordPress主題裡的 style.css 文件裡。

HTML pre標籤作用和使用說明

• 標籤定義了預格式化的文本。
• 標記元素中,包含的文本通常會留下空格和換行符。
• 該文本也將顯示為等寬字體。

標記通常與标记结合使用，以获得更精确的语义，用于标记需要在页面中呈现的源代码。

如果要將指定的文本格式放在HTML中，則需要利用leading元素的屬性。

提示和說明

提示：標記的常見用法是表示計算機的源代碼。

HTML 4.01和HTML5之間的差異

在HTML 4.01中，“width”屬性已棄用，無法使用。 HTML5不支持“width”屬性。

屬性

屬性值描述

• 寬度編號HTML5不支持此屬性。
• HTML 4.01中不推薦使用此屬性。
• 定義每行的最大字符數（通常為40,80或132）。

全局屬性

• <pre>標記支持全局屬性，並查看完整的屬性表HTML全局屬性。

事件屬性

• 標記支持所有HTML事件屬性。