異なるブラウザ間で互換性のあるテキスト配置を実現する CSS

.test-justify {
    テキスト配置: 両端揃え;
}

 <div class="test-justify">
        テストテキスト</div> 

.test-justify {
    テキスト配置: 両端揃え;
} 

div {
    幅: 100ピクセル;
}
.w2 {
    文字間隔: 2em;
}
.w3 {
    文字間隔: 0.5em;
}

<div class="w2">テスト</div>
<div class="w3">テスト済み</div>
<div>テストが近づいています</div> 

<div class="test-justify">
    テストテキスト <span></span>
</div>

.テスト正当化{
    テキスト配置: 両端揃え;
}
スパン {
    表示:インラインブロック;
    パディング左:100%;
} 

たとえば、.net core razor ビューは、<label asp-for="Email"></label> に記述されているモデルの表示名を読み込みます。

div {
    幅: 300ピクセル;
    境界線: 1px実線 #000;
}
.テスト正当化{
    テキスト配置: 両端揃え;
}
スパン {
    表示:インラインブロック;
    パディング左:100%;
}

<div class="test-justify">
    テストテキスト</div>

var $this = $(".test-justify")
, justifyText = $this.text().trim()
、afterText = "";
(var i = 0; i < justifyText.length; i++) {
    afterText += justifyText[i] + " ";
}
afterText = afterText.trim() + "<span></span>";
$this.html(afterText).css({ "height": $this.height() / 2 + "px" }); 

関数myBrowser() {
    var userAgent = navigator.userAgent;

    //ブラウザのバージョンを確認します var isOpera = userAgent.indexOf("Opera") > -1; 
    var isIE = userAgent.indexOf("compatible") > -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);

    if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) {
        「Firefox」を返します。
    } それ以外の場合 (isIE) {
        「IE」を返します。
    } それ以外の場合 (isEdge) {
        「IE」を返します。
    } それ以外の場合 (isIE11) {
        「IE」を返します。
    } そうでない場合 (/[Cc]hrome\/\d+/.test(userAgent)) {
        「Chrome」を返します。
    } そうでない場合 (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
        「Safari」を返す
    } それ以外 {
        「不明」を返す
    }
}

var ブラウザ = myBrowser();
if (ブラウザ == "IE" || ブラウザ == "Safari") {
    var $this = $(".test-justify")
        , justifyText = $this.text().trim()
        、afterText = "";
    (var i = 0; i < justifyText.length; i++) {
        afterText += justifyText[i] + " ";
    }
    afterText = afterText.trim() + "<span></span>";
    $this.html(afterText).css({ "height": $this.height() / 2 + "px" })
}