Wie füge ich am Anfang und Ende jeder Textzeile in einem mehrzeiligen Bereich einen Abstand hinzu?

Abstände am Anfang und Ende jeder Textzeile hinzufügen

Hintergrund

In diesem Szenario erstreckt sich ein Bereich über mehrere Zeilen mit Hintergrund Farbe. Der Benutzer wünscht einen 10-Pixel-Abstand am Ende jeder Zeile, vermeidet jedoch das manuelle Einfügen von nbsp-Tags. CSS- oder JavaScript-Lösungen werden bevorzugt.

CSS-Lösung

In IE8 und späteren Versionen von Chrome, Firefox, Opera und Safari bietet der folgende CSS- und HTML-Code eine kreative Lösung:

CSS:

#titleContainer { width: 520px }
h3 { margin: 0; font-size: 42px; font-weight: bold; font-family: sans-serif }
h3 .heading { background-color: #000; color: #00a3d0; }
h3 .subhead { background-color: #00a3d0; color: #000; }
div { line-height: 1.1; padding: 1px 0; border-left: 30px solid #000; display: inline-block; }
h3 { background-color: #000; color: #fff; display: inline; margin: 0; padding: 0 }
h3 .indent { position: relative; left: -15px; }
h3 .subhead { padding: 0 15px; float: left; margin: 3px 0 0 -29px; outline: 1px solid #00a3d0; line-height: 1.15 }

HTML:

<div>

Erklärung

Diese Technik erstellt mehrere Divs für jede Zeile mit Polsterung und einem durchgehenden Rand auf der linken Seite. Innerhalb jedes Div positioniert ein Inline-h3-Element den Text. Die Unterüberschrift wird nach links verschoben, um den Rand zu entfernen und Zeilenhöhe hinzuzufügen.

Überlegungen

Diese Lösung ist komplex und kann in bestimmten Browsern zu Problemen führen. Es bietet zwar eine visuelle Annäherung an die gewünschte Polsterung, ist jedoch möglicherweise nicht in allen Fällen perfekt.

Das obige ist der detaillierte Inhalt vonWie füge ich am Anfang und Ende jeder Textzeile in einem mehrzeiligen Bereich einen Abstand hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!