使用 pre 标签样式的注意事项

 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一个。从这一点来说，<pre class="brush:php;toolbar:false">标签真的是很有用。<h3>
	　　你在 <pre class="brush:php;toolbar:false"> 标签中使用 <code> 标签吗？</code>

 标签的 “pre” 的意思是 “preformatted text”（预格式化的文本），没有特别规定里面的文本是什么内容。<code> 标签的语义表示其中的文本是代码。这对我来说尤其有用，当我需要显示一段代码时，使用它们，下面是一个例子：<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

<code>和代码之间有一个换行，而这也会被显示成一个空行，这非常讨厌。没有非常好的 CSS 方法来解决这个问题，最好的方法是与 <pre class="brush:php;toolbar:false"> 标签同一行开始代码，或者用编译程序来去除这里的换行。<p style="text-align: center">
	<img alt="Screen Shot 2016-05-21 at 9.02.25 AM.png" src="https://img.php.cn/upload/article/000/000/007/0d1d239a75cc159e4746f3c705f17de8-0.jpg"></p><h3>
	　　选择一个字体</h3><p>
	　　由于 </p><pre class="brush:php;toolbar:false"> 标签主要是用来显示代码块，而代码通常使用等宽字体，因此将 <pre class="brush:php;toolbar:false"> 的样式字体设置成等宽字体是个好主意。<p>
	　　对我们来说幸运地是，浏览器默认字体已经将 </p><pre class="brush:php;toolbar:false"> 设置成等宽字体，因此你可以不做任何处理。当然，你可以设置一个你喜欢的字体。<p>
	这　　里有篇文章是 Michael Tuck 写于 2009 年的，他研究了“font stacks”。font stack 是说将一组字体罗列在一个 font-family 标签中，首选字体列在前面，备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。</p><pre class="brush:php;toolbar:false">font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

标签提供的独一无二的样式来保留空白同时折行，如同下面这样：<pre class="brush:php;toolbar:false">pre {
  white-space: pre-wrap;
}

pre {
  overflow-x: auto;
}

 保持默认的容器宽度，但是允许它在交互的时候展开：<pre class="brush:php;toolbar:false">pre:hover,
pre:focus {
  width: min-content;
}

 标签强制添加一个 inline 样式如下：<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

<pre class="brush:php;toolbar:false"><code>
  <h1>Example code</h1>
<code></code></code>

pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
}

pre {
  tab-width: 4;
}