如何在 HTML 中显示长引号？

在 HTML 中，使用引号是非常常见的。不过，有时候我们需要在页面中显示长引号（也称为智能引号），这需要一些特殊的代码来实现。

使用字符实体

最简单的方法是使用 HTML 字符实体来表示长引号：

• 左单引号：‘ 或 ‘
• 右单引号：’ 或 ’
• 左双引号：“ 或 “
• 右双引号：” 或 ”

这些字符实体会被 HTML 解析器替换为相应的长引号字符。

示例代码：

<p>在这句话中，我用了&ldquo;长引号&rdquo;。</p>

效果：

在这句话中，我用了“长引号”。

使用 CSS

另一种方法是使用 CSS 的 content 属性来插入特殊字符，达到显示长引号的效果。

示例代码：

<style>
    q:before { content: '\201C'; }
    q:after { content: '\201D'; }
    blockquote:before { content: '\2018'; }
    blockquote:after { content: '\2019'; }
</style>

<blockquote>
    <p>这是一个长引用，使用 CSS 显示长引号。</p>
</blockquote>

<q>这是一个短引用，使用 CSS 显示长引号。</q>

效果：

这是一个长引用，使用 CSS 显示长引号。

这是一个短引用，使用 CSS 显示长引号。

注意事项

• 在 HTML 中使用字符实体时，要确保实体本身是正确的，否则可能导致显示错误。
• CSS 中使用的是 Unicode 码点（code point），而非字符实体。必须使用 UTF-8 编码保存 CSS 文件，否则可能会无法正确显示。
• 不同操作系统的默认字体可能对字符显示有所不同，可能会导致长引号的样式略有差异。可以通过 CSS 具体控制长引号的样式。

参考资料

• Long quotation marks in HTML – CSS-Tricks
• HTML Codes - HTML Characters