line-height nicht vererben
xaver
- css
Hallo,
Folgender Text schaut im Firefox und im Opera sehr hässlich
aus, da die Zeilenhöhe vererbt wird. Mann man hier etwas tun?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="width: 200px; font-size: 50px;">
<span style="font-size: 10px">
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
</span>
</div>
</body>
</html>
Hallo
Hallo,
Folgender Text schaut im Firefox und im Opera sehr hässlich
aus, da die Zeilenhöhe vererbt wird. Mann man hier etwas tun?
Setze sie für das Kindelement (hier: <span>) neu. Entweder mit line-height oder mit font (siehe: SELFHTML/CSS/Eigenschaften/font, Codebeispiel #Text04; gemeinsame Notation fon Schriftgröße und Zeilenhöhe).
<div style="width: 200px; font-size: 50px;">
<span style="font-size: 10px">
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
</span>
</div>
Tschö, Auge
Hallo
Folgender Text schaut im Firefox und im Opera sehr hässlich
aus, da die Zeilenhöhe vererbt wird. Mann man hier etwas tun?Setze sie für das Kindelement (hier: <span>) neu. Entweder mit line-height oder mit font (siehe: SELFHTML/CSS/Eigenschaften/font, Codebeispiel #Text04; gemeinsame Notation fon Schriftgröße und Zeilenhöhe).
Ich habe mal im FF2 ein wenig rumexperimentiert. Auch wenn ich für das <span> eine line-height angebe, zeigt diese Angabe -selbst mit !important- keine Wirkung. Wenn ich aus dem <span> ein <p> mache (Inline- zu Blockelement) _dann_ kann ich auch die line-height weglassen und dennoch wird die kleine Schrift auch mit dazu passender, geringer Zeilenhöhe dargestellt.
<div style="width: 200px; font-size: 50px;">
<span style="font-size: 10px">
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
</span>
</div>
Tschö, Auge
Hallo,
Danke für die Antwort. Ich bin wegen Umfließungen auf Inline-Elemente
angewiesen. Es gibt keine Möglichkeit die Zeilenhöhe von
Inline-Elementen anzupassen?
Danke.
xaver
Hi,
Danke für die Antwort. Ich bin wegen Umfließungen auf Inline-Elemente
angewiesen. Es gibt keine Möglichkeit die Zeilenhöhe von
Inline-Elementen anzupassen?
doch. Aber es gibt keine Möglichkeit, die Text-Nodes zu formatieren, die sich außerhalb Deines Inline- und innerhalb Deines Container-Elementes befinden, ohne die Styles des Container-Elementes zu verändern. Genau diesen Zweck hat es nämlich.
Cheatah
Hi,
Danke für die Antwort. Ich möchte die Zeilenhöhe des Textes innerhalb
des Inline-Elements formatieren (nicht außerhalb des Enline-Elements).
Beispiel unten - falsch im Firefox und Opera.
Danke.
xaver
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="width: 200px; font-size: 50px;">
<span style="font-size: 10px">
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
</span>
</div>
</body>
</html>
Hi,
Danke für die Antwort. Ich möchte die Zeilenhöhe des Textes innerhalb
des Inline-Elements formatieren (nicht außerhalb des Enline-Elements).
das tust Du ja auch. Was Du nicht tust, ist den Text außerhalb des Inline-Elements zu formatieren, so dass dieser natürlich die Größen des übergeordneten Elements besitzt.
Beispiel unten - falsch im Firefox und Opera.
Nein, falsch ist es nur im IE. Firefox und Opera wissen, was Text ist.
<div style="width: 200px; font-size: 50px;">
<span style="font-size: 10px">
Hier beispielsweise stecken drei Textteile drin: 1.) vor dem <div>, 2.) zwischen <div> und <span>, 3.) hinter dem <span>. Die letztgenannte Node enthält dann noch Deine vielen "test".
Cheatah
Hi Cheatah,
Du kennst Dich sehr gut aus. Kann man das irgendwie basteln, dass
das Inline-Element eine optisch richtige Zeilenhöhe bekommt?
Danke
xaver
Hallo
Du kennst Dich sehr gut aus. Kann man das irgendwie basteln, dass
das Inline-Element eine optisch richtige Zeilenhöhe bekommt?
Was willst du denn genau erreichen? Ich habe das mit dem Umfluss nicht so recht verstanden, ... eigentlich garnicht. Vielleicht kannst du das ja auch mit einem Blockelement konstruieren, sodass sich dein Problem in Wohlgefallen auflöst.
Tschö, Auge