So richten Sie Text an beiden Enden mit CSS aus

Dieser Artikel stellt den Effekt der Verwendung von CSS zum Ausrichten beider Textenden vor. Interessierte Freunde können einen Blick darauf werfen.

CSS-Methode zum Ausrichten von Text an beiden Enden

Apropos Textausrichtung, jeder muss damit vertraut sein Verwenden Sie die Schlüsselwörter left, right und center, um die linke, rechte und mittlere Ausrichtung von Inline-Elementen relativ zum übergeordneten Element zu realisieren. Natürlich verwenden wir auch justify, um beide Enden des Textes auszurichten.

Wie im Bild oben gezeigt, sind die beiden Enden relativ zur linken Ausrichtung ausgerichtet, was optisch ordentlich und ordentlich aussieht. Aber justify gilt nicht für die letzte Zeile. Wenn die letzte Zeile nur zwei Wörter enthält, ist dies normalerweise nicht der Fall Wir haben nur eine Textzeile, aber wie lässt sich das Problem lösen, beide Enden einer einzelnen Textzeile auszurichten (der Formularelementeffekt, wie unten gezeigt)?

Laut Begründung ist es für die letzte Zeile ungültig. Wir können eine neue Zeile hinzufügen, sodass der Text dieser Zeile nicht die letzte Zeile ist folgt:

//html<div class="item">
    <span class="label" >{{item.label}}</span>：    <span class="value">{{item.value}}</span></div>

//scss
.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .value {
        padding-right: 10px;
    }
}

Aber die obige Schreibmethode kann als problematischer bezeichnet werden. Hier kommt der entscheidende Punkt Das Attribut text-align-last wird in einem Textabsatz für die Ausrichtung der letzten Zeile definiert, bevor ein Umbruch erzwungen wird.

//scss
.item {
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .value {
        padding-right: 10px;
    }
}

Im Vergleich zur ersten Implementierung ist die zweite Implementierung viel einfacher. Dieses Attribut weist jedoch Kompatibilitätsprobleme auf. Sie können die Implementierungsmethode je nach Situation festlegen.

(Empfohlenes Lernen: CSS-Tutorial )

Das obige ist der detaillierte Inhalt vonSo richten Sie Text an beiden Enden mit CSS aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!