Zeilenabstand einstellen

145

Wie kann ich den Zeilenabstand mit CSS festlegen, wie wir ihn in MS Word festlegen können?

css line Mond
quelle

236

Versuchen Sie, die line-height - Eigenschaft.

Beispiel: 12 Pixel Schriftgröße und 4 Pixel Abstand von der unteren und oberen Zeile:

line-height: 20px; /* 4px +12px + 4px */

Oder mit emEinheiten

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

Mario Cesar
quelle

10

Ich fand, display: block;dass diese Einstellungen auch überall wirksam sein mussten, nicht nur oben und unten im Absatz.

PatrickT

2

Denken Sie daran, dass Sie den Wert der Eigenschaft für die Zeilenhöhe nicht unter '1' oder '100%' festlegen können, wenn Sie ihn auf ein <a> -Element setzen. Wenn Sie möchten, können Sie beispielsweise ein zwischen Ihrem Text und Ihrem <a> festlegen.

Raulchopi

2

es funktioniert nicht mit span, weil, wie von @PatrickT erwähnt, span nicht angezeigt wird: block

walv

1

@walv, das ist nicht anzunehmen. Auch wenn Sie es in einem Zeitraum verwenden müssen, ist es vorzuziehen, display: inline-block anstelle von display: block zu verwenden.

Mario Cesar

1

@Userthatisnotauser Sie können nicht, dass eine ähnliche Sache mit Benutzern passieren wird, die Java-Applet oder Webanwendung verwenden müssen, die ᴜᴅᴘ Socket erfordert (wegen des Verlustes von ɴᴘᴀᴘɪ Unterstützung und alle Browser ziehen die Unterstützung in ihrem benutzerdefinierten Plug-In zurück) . Die Website, die der Cassini-Mission gewidmet ist, benötigt weiterhin das Plugin für schnelle Zeit, um ihr Video online anzusehen. Ganz zu schweigen von ɴᴘᴀᴘɪ Plugins, mit denen Sie stereoskopische Videos über stereoskopische Displays im Streaming ansehen können. In meinem Land benötigen zwei große TV-Sender immer noch Silverlight, um nicht zu aktualisieren.

user2284570

103

Sie können auch einen Wert ohne Einheit verwenden, dh die Anzahl der Zeilen: line-height: 2;doppelter Abstand,line-height: 1.5; eineinhalb usw.

MikeTheLiar
quelle

In Presto-basierter Oper funktioniert das nicht. Ich brauche eine Problemumgehung ... bitte! : \

user2284570

@Benutzerstatus: Funktioniert auf meinem Computer. Haben Sie eine der anderen Antworten ausprobiert?

MikeTheLiar

Ich meine, das CSS-Element wird erkannt, hat aber keinen Einfluss auf die Renderausgabe. Getestet 12.16 und 12.50. Die andere Antwort ist im Grunde die gleiche: SIE ALLE SAGEN, das Zeilenhöhenelement zu verwenden!

user2284570

@user Weil du es so machst. Ich würde mir vorstellen, dass es sich um einen Browserfehler oder eine mangelnde Unterstützung für diese CSS-Regel handelt. Sollte wahrscheinlich als separate Frage gestellt werden.

MikeTheLiar

Sicher, das Bitten um eine Problemumgehung ist hier nicht zum Thema ... übrigens, wie ich gesehen habe, wirkt es sich auf andere Browsermarken aus: Es existiert, wenn die Einstellung mit dem DOM festgelegt wird oder wenn contenteditable = "true" vorhanden ist.

user2284570

12

Sie können den Abstand zwischen Absätzen in CSS nicht mithilfe der Zeilenhöhe, dem Abstand zwischen Blöcken, festlegen . Dadurch wird stattdessen der Zeilenabstand innerhalb des Absatzes festgelegt, der Abstand zwischen den Zeilen innerhalb von a Blocks. Das heißt, die Zeilenhöhe ist die Zwischenzeile des Typographen innerhalb des Absatzes, die durch die Zeilenhöhe gesteuert wird.

Gegenwärtig kenne ich keine Methode in CSS, um (zum Beispiel) einen Abstand von 0,15 em zu erzeugen , unabhängig davon, ob em- oder rem-Varianten für eine Schrifteigenschaft verwendet werden. Ich vermute, dass dies mit komplexeren Floats oder Offsets möglich ist. Schade, dass dies in CSS notwendig ist.

Thomas Visel
quelle

7

Könnten Sie dafür keine Ränder für den Abstand verwenden?

Flimm

4

In einigen Fällen margin-topund / oder margin-bottomkann effektiv erreichen, was hier gewünscht wird.

user1147171

10

Wenn Sie komprimierte Leitungen möchten, können Sie denselben Wert für font-sizeund festlegenline-height

In Ihrer CSS-Datei

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

In Ihrer HTML-Datei

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> Spielen Sie mit diesem Snippet auf jsfiddle.net

Sie können auch die line-heightFeinabstandssteuerung erhöhen :

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}

olibre
quelle

9

Versuchen Sie diese Eigenschaft

line-height:200%;

oder

line-height:17px;

Verwenden Sie die Option zum Erhöhen und Verringern der Lautstärke

ANANTH.S
quelle

@ AVD: Es funktioniert nicht in Presto-basierten Opera. Ich brauche eine Problemumgehung ... bitte! : \

user2284570

4

Ich bin mir nicht sicher, ob Sie das gemeint haben:

line-height: size;

Alan Haggai Alavi
quelle

4

Versuchen Sie line-heightEigentum; Es gibt viele Möglichkeiten, die Zeilenhöhe zuzuweisen

Harsha MV
quelle

1

Ja, wie jeder sagt, line-heightist die Sache. Jede Schriftart, die Sie verwenden, ein Zeichen mittlerer Höhe (z. B. a oder ■, das nicht durch die obere oder untere geht) sollte dieselbe Höhenlänge von line-height: 0.6bis haben 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>

Erweitern Sie das Snippet

RubenVerg
quelle

0

lineSpacing wird in React Native (oder nativen mobilen Apps) verwendet.

Für das Web können Sie letterSpacing(oder letter-spacing) verwenden

Eric Kim
quelle

Zeilenabstand einstellen

Antworten: