懸停在懸停...沒有佈局變化

更改字體重量，尤其是大膽的，通常會觸發佈局變化。這是因為大膽文本通常佔據更多的水平空間。儘管在某些佈局中無關緊要（例如，垂直堆疊的鏈接），但在其他佈局中可能會出現問題，例如元素可能會發生變化的水平行。

瑞安·穆里根（Ryan Mulligan）強調了這個問題，並提供了一個優雅的解決方案：

徘徊在大膽的文本中會導致明顯的佈局變化，尤其是隨著包裝元素的變化。一個聰明的解決方法：隱藏的偽元素鏡像文本，預先折疊以保留必要的空間。

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

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

Mulligan的方法很巧妙。每個列表項目都包含一個隱藏的偽元素，其中包含一個相同的文本字符串，預定為粗體。此隱形元素保留所需的寬度，在懸停在實際鏈接文本時，可以防止佈局變化。

該技術的有效性也取決於佈局方法。用CSS網格強迫固定數量的列，尤其是在不超過列寬的文本的情況下消除了轉移問題。但是，允許自動列包裝可能會重新引入問題。

以上是懸停在懸停...沒有佈局變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！