CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

Beim Front-End-Layout des Formulars müssen wir häufig den Eingabeaufforderungstext des Textfelds an beiden Enden ausrichten, zum Beispiel:

Ein einfacherer Ansatz besteht darin, dem Text, der durch Ränder isoliert werden muss, Tags hinzuzufügen und dann die Ränder jedes Wortes separat zu steuern. Diese Methode ist genauer als das direkte Hinzufügen von Leerzeichen oder Platzhaltern, und ich habe dies bereits getan. Doch nachdem ich mehr geschrieben hatte, begann ich mich zu fragen, ob es abstrahiert und in mehr Szenarien verwendet werden könnte. Den Code besser aussehen lassen? Geringere Wartungskosten?

1. Als erstes fällt mir ein, ob das Problem direkt mit CSS gelöst werden kann

CSS

.test-justify {
    Textausrichtung: Blocksatz;
}

html

 <div Klasse="test-justify">
        Testtext</div> 

Nun, text-align:justify ist völlig wirkungslos, also habe ich es mit einem Textstück getestet und der Effekt ist wie folgt:

Es stellt sich heraus, dass diese Eigenschaft zum Ausrichten des Textes an beiden Enden eines Absatzes dient. Versuchen Sie als Nächstes text-align-last: justify .

CSS

.test-justify {
    Textausrichtung: Blocksatz;
} 

Der Effekt wird erreicht, aber der Nachteil besteht darin, dass es völlig inkompatibel mit den Browsern IE und Safari ist.

2. Dann denken Sie darüber nach. Da die obige Implementierung Kompatibilitätsprobleme aufweist, können wir separate CSS-Klassen für Texte mit einer Länge von 2, 3, 4 usw. schreiben, um das Problem zu lösen? Weil die Textfeldaufforderungen im Formular nicht viele Wörter enthalten.

CSS

div {
    Breite: 100px;
}
.w2 {
    Buchstabenabstand: 2em;
}
.w3 {
    Buchstabenabstand: 0,5em;
}

html

<div class="w2">Test</div>
<div class="w3">Getestet</div>
<div>Der Test kommt</div> 

Diese Lösung scheint das Problem zu lösen und sollte die meisten Szenarien bewältigen können, ist aber leider an beiden Enden nicht wirklich ausgerichtet und kann die Anforderungen in speziellen Anzeigesituationen immer noch nicht erfüllen. Lassen wir es vorerst beiseite und versuchen es weiter.

2. Das Obige ist eine reine CSS-Implementierung. Als nächstes wollen wir sehen, ob wir CSS und DOM kombinieren können, um eine einheitliche Lösung zu erstellen.

html

<div Klasse="test-justify">
    Testtext <span></span>
</div>

CSS

.test-justify {
    Textausrichtung: Blocksatz;
}
Spanne {
    Anzeige: Inline-Block;
    Polsterung links: 100 %;
} 

Ich bin ein wenig aufgeregt, wenn ich daran denke, und es ist perfekt mit IE und Safari kompatibel. Diese Lösung ist eigentlich eine Erweiterung der Lösung zur Ausrichtung des ersten Absatzes. Sie verwendet Leerzeichen, um eine Worttrennung zu erzwingen, und verwendet dann span, um die letzte Zeile zu fälschen (Test-Justify richtet die letzte Zeile nicht aus).

Um die Skalierbarkeit zu erhöhen, müssen wir diese Lösung optimieren, da der Text in den meisten Fällen aus dem Backend geladen wird.

Beispielsweise lädt die .net core razor view den Anzeigenamen des Modells wie in <label asp-for="Email"></label> geschrieben.

Fügen Sie einfach ein kleines Stück JS hinzu und es sollte mit allen Szenarien kompatibel sein.
CSS

div {
    Breite: 300px;
    Rand: 1px durchgezogen #000;
}
.test-justify {
    Textausrichtung: Blocksatz;
}
Spanne {
    Anzeige: Inline-Block;
    Polsterung links: 100 %;
}

html

<div Klasse="test-justify">
    Testtext</div>

js

var $this = $(".test-justify")
, justifyText = $this.text().trim()
, nachText = "";
für (var i = 0; i < justifyText.length; i++) {
    nachText += Text ausrichten[i] + " ";
}
nachText = nachText.trim() + "<span></span>";
$this.html(afterText).css({ "Höhe": $this.height() / 2 + "px" }); 

Nun, diese Lösung sollte gängige Browser unterstützen können. Der Nachteil besteht jedoch darin, dass die Anpassung über js erfolgt. Wenn Sie beim Aktualisieren genau hinschauen, sehen Sie den Prozess der Textausrichtung (Blinken). Das ist kein sehr gutes Erlebnis. Machen wir es also kompatibel.
Nur IE und Safari unterstützen text-align-last: justify nicht. Berücksichtigen Sie daher nur diese beiden Browser und rufen Sie die letzte Lösung auf.

Funktion meinBrowser() {
    var userAgent = navigator.userAgent;

    //Browserversion ermitteln var isOpera = userAgent.indexOf("Opera") > -1; 
    var isIE = userAgent.indexOf("kompatibel") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; 
    var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; 
    var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);

    wenn (/[Ff]irefox(\/\d+\.\d+)/.test(BenutzerAgent)) {
        gib "Firefox" zurück;
    } sonst wenn (istIE) {
        gib "IE" zurück;
    } sonst wenn (istKante) {
        gib "IE" zurück;
    } sonst wenn (istIE11) {
        gib "IE" zurück;
    } sonst wenn (/[Cc]hrome\/\d+/.test(userAgent)) {
        gib "Chrome" zurück;
    } sonst wenn (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
        Rückkehr "Safari"
    } anders {
        Rückgabewert "unbekannt"
    }
}

var browser = meinBrowser();
if (browser == "IE" || browser == "Safari") {
    var $this = $(".test-justify")
        , justifyText = $this.text().trim()
        , nachText = "";
    für (var i = 0; i < justifyText.length; i++) {
        nachText += Text ausrichten[i] + " ";
    }
    nachText = nachText.trim() + "<span></span>";
    $this.html(nachText).css({ "Höhe": $this.height() / 2 + "px" })
}

Hahahaha, perfekt!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.