我提到了一个简单的 CSS 技巧，可以在 2021 年生成全角图形。前几天我在想，是否可以使某些元素自动生成，这样我就不需要手动将它们指定为全角。最后，我编写了一些 JS 代码来自动处理三种类型的元素：
-
代码块（
<pre><code>）。如果
scrollWidth大于offsetWidth，则意味着代码块有一个水平滚动条，我们可能希望将其设置为全角。 -
表（
<table>）。如果其
offsetWidth大于其父级的offsetWidth，则它太宽。 -
目录（具有 ID
TableOfContents元素，例如<nav id="TableOfContents">）。如果任何 TOC 项目在布局上有多个矩形 (
getClientRects().length > 1)，则意味着该项目已换行，并且 TOC 可能会受益于更多空间。
JS 代码将为需要更多空间的元素添加fullwidth角类名。用户可以为该类定义 CSS 规则，例如：
.fullwidth { width: 100vw; margin-left: calc(50% - 50vw); }
在我的网站上，我并没有真正使用全屏宽度，而仅使用主体宽度。这取决于您想要.fullwidth元素的宽度。您可以从 jsdelivr CDN 加载 JS：
<script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/fullwidth.min.js" defer></script>
上面的代码块也是自动全角元素的示例。如果您在大屏幕（例如计算机屏幕）上查看它，它应该占据整个正文的宽度。