1. 首页
  2. css

CSS设置\”pre\”标记样式的注意事项

你可能用过。它是HTML中非常特殊的标记,允许标记中的空白实际上得到尊重。例如,四个空格实际上就是四个空格!这与HTML通常的工作方式不同,在HTML中,空格\”折叠\”(四个空格将变成一个)。标记确实很有用。
是否在内部使用\”code\”标记?
标签的\”pre\”字面意思是\”预先格式化的文本\”–它没有说明文本是什么。从语义上讲,标记表示代码中的文本。这对我来说很有意义!我总是在放置代码块时使用它,根据我的经验,这就是1用例。换行符将呈现,这可能非常烦人。没有很好的CSS方法来处理这个问题。最好的方法就是在标记的同一行上开始文本,或者以编程方式删除前导的空格。选择字体
因为标记的主要用例是代码块,并且代码通常是用单空格字体编写的,所以设置单空格font-family对我们来说这可能是个好主意,
幸运的是,\”用户代理样式表\”(您在浏览器中获得的样式,而不添加任何自己的CSS)已经设置了font-family: monospace;。所以,你什么都不能做。或者,你可以想象一下。
有一篇2009年的文章,作者是Michael Tuck,他探讨了\”字体堆栈\”。也就是说,在一个font-family声明中列出一堆字体,让最理想的选择排在第一位,然后朝着不太理想的选择往下倒。他的monospace字体的示例堆栈使用了跨平台预装字体:
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;
我不确定该堆栈如何在今天的所有平台上仍然有效,但它看起来是一个很好的开始。
或者,您可以加载自己的自定义@font-face字体并使用它(字体堆栈)仍然适用)。或者,使用服务。我写这篇文章时,Typekit提供了23种单空格字体。要换行还是不换行?
这是个人喜好。就我个人而言,我是分裂的。
在我的代码编辑器中进行编码时,我更喜欢在将可见区域的宽度分割为下一行时进行编码(而不是导致水平滚动)。在文章中查看代码时,我更喜欢代码不会中断。奇怪,我知道。在CodePen上,我们将它作为一个用户选项,因为世界对他们的喜好是如此的不同。
在设计样式时,您必须做出选择。如果使用包装,幸运的是,您可以保持标记保留空白和获得包装的独特功能,例如:
pre { white-space: pre-wrap; }
如果不使用包装,则无需执行任何操作。除了,你应该考虑在长时间排队的情况下会发生什么。真正的长线会很高兴地从固定宽度的容器中弹出,或者出乎意料地拉伸容器的宽度。为了防止这种情况发生,我建议至少:
pre { overflow-x: auto; }
如果你想避免令人讨厌的高代码块,你甚至可以考虑使用max-height和总计overflow: auto;。可能使它自动扩展
有些人,甚至你,都不喜欢换行和水平滚动。可能有解决办法!您可以将<pre>块保留为默认的块容器宽度,但允许它们在与以下对象交互时展开:
pre:hover, pre:focus { width: min-content; }这是否会进入电子邮件?
也许以某种方式,您编写的HTML最终会在电子邮件中使用。预标记在电子邮件中可能很危险,因为您的CSS不适用于电子邮件(这可以帮助换行),所以默认的不换行文本会出现,长行可能会破坏电子邮件布局。
关于CSS技巧,回到我从RSS提要自动生成电子邮件时事通讯时,我必须生成一个特殊的RSS提要来处理HTML,并确保在所有<pre>标记上强制使用内联样式,例如:
<pre>
,这样我就尽我所能确保带有长行的代码块不会破坏布局。需要突出显示语法吗?
这里不乏语法突出显示选项。你可以在网上搜索他们。就我个人而言,我是你的粉丝棱镜.js因为…
1. 它的文件大小很小
2. 它没有依赖关系
3. 它有敏感的类名
4. 它允许你用你需要的东西定制一个副本。

CSS设置\”pre\”标记样式的注意事项 为WP2原创文章,链接:https://www.wp2.cn/css/css%e8%ae%be%e7%bd%aepre%e6%a0%87%e8%ae%b0%e6%a0%b7%e5%bc%8f%e7%9a%84%e6%b3%a8%e6%84%8f%e4%ba%8b%e9%a1%b9/