2 Stimmen

Wie kann man dieses Problem beheben?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<br /><br /><br />
<div style="line-height:150%">
<span style="display:block;font-size:240%;">test</span>
</div>
</body>
</html>

Zuerst doppelklicken Sie auf den Text test, dann wird er hervorgehoben.

Dann können Sie über Firebug sehen, dass das , in dem es sich befindet, kürzer ist als der Text selbst.

Wie können Sie das span automatisch mit dem Text wachsen lassen?

4voto

K Prime Punkte 5719

Versuche, line-height auf 1,5 zu ändern

1voto

Mathias Bynens Punkte 136619

Dies ist dein Originalcode:

 Test

Dies setzt die line-height aller Elemente im div auf 150%. Dieser Prozentsatz bezieht sich auf ihre berechnete Schriftgröße. Das span erbt die Schriftgröße des div und die line-height wird darauf basierend berechnet. Du hast die Schriftgröße des span auf das 24-fache seiner vererbten Größe gesetzt, aber die line-height bleibt unverändert.

Kurz gesagt: line-height: 150% nimmt 150% der berechneten Schriftgröße des Elements, um die Zeilenhöhe zu berechnen, was gleichbedeutend damit ist, sie mit 1,5 zu multiplizieren.


Wie bereits erwähnt, behebt man dieses Verhalten, indem man line-height: 1.5; verwendet:

 Test

Dies löst eine Neuberechnung der line-height basierend auf der neuen Schriftgröße aus. Es setzt die line-height aller Elemente im div auf das 1,5-fache. Dieser Prozentsatz bezieht sich auf ihre aktuelle Schriftgröße. Das span erbt die Schriftgröße des div. Du hast die Schriftgröße des span auf das 2,4-fache seiner vererbten Größe gesetzt, und die neue line-height wird darauf basierend berechnet.

Kurz gesagt: line-height: 1.5 (ohne Einheiten) multipliziert die aktuelle Schriftgröße des Elements mit 1.5, um die Zeilenhöhe zu berechnen.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X