悬停在悬停...没有布局变化

更改字体重量，尤其是大胆的，通常会触发布局变化。这是因为大胆文本通常占据更多的水平空间。尽管在某些布局中无关紧要（例如，垂直堆叠的链接），但在其他布局中可能会出现问题，例如元素可能会发生变化的水平行。

瑞安·穆里根（Ryan Mulligan）强调了这个问题，并提供了一个优雅的解决方案：

徘徊在大胆的文本中会导致明显的布局变化，尤其是随着包装元素的变化。一个聪明的解决方法：隐藏的伪元素镜像文本，预先折叠以保留必要的空间。

在行动中查看： https：//www.php.cn/link/e44956a0a9118d2bfe39f3483483f57db37 pic.twitter.com/kdzbtlq0rd

- 瑞安·穆里根（Ryan Mulligan）（@hexagoncircle）2020年7月20日

Mulligan的方法很巧妙。每个列表项目都包含一个隐藏的伪元素，其中包含一个相同的文本字符串，预定为粗体。此隐形元素保留所需的宽度，在悬停在实际链接文本时，可以防止布局变化。

该技术的有效性也取决于布局方法。用CSS网格强迫固定数量的列，尤其是在不超过列宽的文本的情况下消除了转移问题。但是，允许自动列包装可能会重新引入问题。

以上是悬停在悬停...没有布局变化的详细内容。更多信息请关注PHP中文网其他相关文章！