CSS样式里pre是什么？HTML中pre自动换行code标签作用

原文链接：https://www.chenweiliang.com/cwl-2116.html

文章目录

• 1 HTML <pre> 标签示例
• 2 HTML pre标签作用和使用说明
• 3 提示和说明
• 4 HTML 4.01和HTML5之间的差异
• 5 属性
  • 5.1 全局属性
  • 5.2 事件属性

我们用WordPress建站需要学习一些CSS 和 HTML的基础知识：

• 由于某些WordPress主题的CSS样式文件，并没有加入 pre 和 code 标签样式。


• 大多数浏览器目前支持<pre>标记。

HTML <pre> 标签示例

以下是 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标签作用和使用说明

• <pre>标签定义了预格式化的文本。


• <pre>标记元素中,包含的文本通常会留下空格和换行符。


• 该文本也将显示为等宽字体。

<pre>标记通常与<code>标记结合使用，以获得更精确的语义，用于标记需要在页面中呈现的源代码。

如果要将指定的文本格式放在HTML中，则需要利用leading元素的属性。

提示和说明

提示：<pre>标记的常见用法是表示计算机的源代码。

HTML 4.01和HTML5之间的差异

在HTML 4.01中，“width”属性已弃用，无法使用。 HTML5不支持“width”属性。

属性

属性值描述

• 宽度编号HTML5不支持此属性。


• HTML 4.01中不推荐使用此属性。


• 定义每行的最大字符数（通常为40,80或132）。

全局属性

• <pre>标记支持全局属性，并查看完整的属性表HTML全局属性。

事件属性

• <pre>标记支持所有HTML事件属性。

欢迎转载《CSS样式里pre是什么？HTML中pre自动换行code标签作用》
陈沩亮版权所有，转载请注明出处链接：https://www.chenweiliang.com/cwl-2116.html


网站地址：https://www.chenweiliang.com/



欲学更多秘技，请关注微信公众号：cwlboke