【译】考虑 <pre> 标签的样式_html/css_WEB-ITnose

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

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

<code> 和代码之间有一个换行，而这也会被显示成一个空行，这非常讨厌。没有非常好的 CSS 方法来解决这个问题，最好的方法是与 <pre class="brush:php;toolbar:false"> 标签同一行开始代码，或者用编译程序来去除这里的换行。 </p>    <p>  </p>    <h3>选择一个字体</h3>    <p> 由于 <pre class="brush:php;toolbar:false"> 标签主要是用来显示代码块，而代码通常使用等宽字体，因此将 <pre class="brush:php;toolbar:false"> 的样式字体设置成等宽字体是个好主意。 </p>    <p> 对我们来说幸运地是，浏览器默认字体已经将 <pre class="brush:php;toolbar:false"> 设置成等宽字体，因此你可以不做任何处理。当然，你可以设置一个你喜欢的字体。 </p>    <p> 这里有篇 文章 是 Michael Tuck 写于 2009 年的，他研究了 “font stacks” 。font stack 是说将一组字体罗列在一个 font-family 标签中，首选字体列在前面，备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。 </p>    <pre class="sycode" name="code">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;

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

pre {  overflow-x: auto;}

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

 标签强制添加一个 inline 样式如下： </p>    <pre class="sycode" name="code"><pre style="white-space: pre-wrap;">

<pre data-lang="HTML"><code>  <h1>Example code</h1><code>

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

pre {  tab-width: 4;}