Wie füge ich in CSS und JavaScript einen Abstand am Ende von Textzeilen hinzu?

Abstände am Anfang und Ende von Textzeilen hinzufügen

Der Bedarf an Abständen für bestimmte Textzeilen kann in verschiedenen Entwurfsszenarien auftreten. In diesem Fall wünscht der Benutzer einen Abstand von 10 Pixeln am Ende jeder Zeile in einem Span-Element.

CSS-Ansatz:

Der bereitgestellte CSS-Code bietet eine kreative Lösung um diesen Effekt zu erzielen. Es nutzt eine Kombination aus Inline-Blöcken, Border-Left-Stil und Positionierungstricks, um die gewünschte Auffüllung zu simulieren:

#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;
}

Diese Lösung ist zwar beeindruckend, aber nicht ohne Herausforderungen und wird nicht für alle Browser empfohlen . Es demonstriert jedoch die Flexibilität von CSS-Techniken.

JS-Lösung:

Für einen einfacheren Ansatz können Sie JavaScript verwenden, um die Zeilenumbrüche zu finden und geschützte Zeilenumbrüche hinzuzufügen Leerzeichen nach Bedarf.

Das obige ist der detaillierte Inhalt vonWie füge ich in CSS und JavaScript einen Abstand am Ende von Textzeilen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!