Fett auf Schwebede ... ohne die Layoutverschiebung

Das Ändern von Schriftarten, insbesondere zu fettem, löst oft Layoutverschiebungen aus. Dies liegt daran, dass kühner Text normalerweise mehr horizontalen Raum einnimmt. Während in einigen Layouts (z. B. vertikal gestapelte Links) in anderen Layouts, aber in anderen, beispielsweise horizontale Zeilen, in denen sich Elemente verschieben könnten, problematisch sein kann.

Ryan Mulligan hebt dieses Problem hervor und bietet eine elegante Lösung:

Das schwebende Text verursacht bemerkenswerte Layoutverschiebungen, insbesondere bei Wickelelementen. Eine clevere Problemumgehung: Eine versteckte Pseudo-Elemente, die den Text widerspiegelt, der vorgezogen ist, um den notwendigen Raum zu reservieren.

Siehe es in Aktion: https://www.php.cn/link/e444956a0a9118d2bfe39f3483f57db37 pic.twitter.com/kdzbtlq0rd

- Ryan Mulligan (@hexagoncircle) 20. Juli 2020

Mulligans Ansatz ist genial. Jedes Listenelement enthält eine versteckte Pseudoelement, die eine identische Textzeichenfolge enthält, die als fett geprägt ist. Dieses unsichtbare Element behält sich die erforderliche Breite vor und verhindert Verschiebungen, wenn der tatsächliche Verbindungstext bei Schwebungen fett ist.

Die Wirksamkeit dieser Technik hängt auch von der Layout -Methode ab. Das Erzwingen einer festen Anzahl von Spalten mit CSS -Gitter, insbesondere mit Text, die die Spaltenbreite nicht überschreiten, beseitigt das Verlagerungsproblem. Durch das Ermöglichen der automatischen Säulenverpackung wird das Problem wahrscheinlich wieder vorgenommen.

Das obige ist der detaillierte Inhalt vonFett auf Schwebede ... ohne die Layoutverschiebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!