Beispiel für die Ausrichtung beider Enden einer einzelnen Textzeile mithilfe von CSS

Bei unserer täglichen WEB-Frontend-Entwicklung stoßen wir häufig auf Situationen, in denen eine einzelne Textzeile an beiden Enden ausgerichtet sein muss. Sie muss also auch mit allen Browsern kompatibel sein beide Enden? Heute werde ich Ihnen eine detaillierte Einführung in das Beispiel der Verwendung von CSS zum Ausrichten beider Enden einer einzelnen Textzeile geben!

p{
    text-align:justify;
    text-align-last:justify;
}

Jeder kennt die beiden oben genannten Codezeilen. Für mehrzeiligen Text kann er grundsätzlich mit allen Browsern kompatibel sein und eine Ausrichtung an beiden Enden erreichen. Bei mehrzeiligem Text berücksichtigt dieser Stil nicht den letzten Textabsatz.

Also müssen wir für einzeiligen chinesischen Text einen Patch erstellen

p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

Wir verwenden den After-Selektor, um am Ende Inhalte hinzuzufügen Der einzeilige Text führt jedoch dazu, dass p gestreckt wird, sodass wir auch die Höhe festlegen müssen. Der vollständige Code lautet wie folgt:

p{
    text-align:justify;
    text-align-last:justify;
    height:24px;
}
 p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

Diese Methode ist mit allen gängigen Browsern kompatibel. Zumindest sind mir keine begegnet, die schwierig zu bedienen sind. Für Browser, die den After-Selektor nicht unterstützen, verwenden Sie bitte das selectivize-Skript, siehe Mein anderer Blog

文 字 间 要 有 空 格，不 然 不 管 用

Zusammenfassung:

Dieser Artikel verwendet Beispiele, um die CSS-Implementierung einzelner Zeilen an beiden Enden detailliert vorzustellen Ich glaube, Sie haben diesen Artikel mit Ausrichtungsbeispielen besser verstanden und hoffen, dass er für Ihre Arbeit hilfreich sein wird! ~

Verwandte Empfehlungen:

Teilen von Bild- und Textcode, um eine beidseitige Ausrichtung in CSS3 zu erreichen

Beispiel, wie der CSS-Stil eine beidseitige Ausrichtung von Absatztext erreichen kann

Ausführliche Erklärung wie CSS eine beidseitige Ausrichtung erreichen kann

Das obige ist der detaillierte Inhalt vonBeispiel für die Ausrichtung beider Enden einer einzelnen Textzeile mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!