How css solves the problem of text compatibility under different browsers

Goal:

css enables compatible text alignment under different browsers.

In the front-end layout of the form, we often need to align the prompt text of the text box at both ends, for example:

Solution process:

1. The first thing that comes to mind is whether the problem can be solved directly with css

css

.test-justify {
    text-align: justify;
}

html

<div class="test-justify">
       测试文本
</div>

Okay, text -align:justify was completely ineffective, and I was unwilling to accept it, so I tested it with a piece of text. The effect is as follows:

(Recommended tutorial: CSS tutorial)

It turns out that this attribute is for aligning both ends of the paragraph text, then try text-align-last: justify this attribute

css

.test-justify {
    text-align: justify;
}

The effect is achieved, but the disadvantage is that it is completely incompatible with IE and Safari browsers.

2. Then think about it, since the above implementation has compatibility issues, can you write separate css classes for 2, 3, 4, etc. texts of such length, because the text box prompt text of the form is also Not a lot.

css

div {
    width: 100px;
}
.w2 {
    letter-spacing: 2em;
}
.w3 {
    letter-spacing: 0.5em;
}

html

<div class="w2">测试</div>
<div class="w3">测试了</div>
<div>测试来了</div>

This solution seems to be able to solve the problem and should be fine for most scenarios, but Unfortunately, it is not really aligned at both ends, and it still cannot meet the needs in special display cases. We will leave it alone and continue to try.

2. The above is a pure css implementation. Next, let’s see if the combination of css and dom can create a unified solution.

html

<div class="test-justify">
    测 试 文 本
    <span></span>
</div>

css

.test-justify {
    text-align: justify;
}
span {
    display:inline-block;
    padding-left:100%;
}

Think about it, it’s a little exciting, and it’s perfectly compatible with IE and Safari. This solution In fact, it is an extension of the first paragraph alignment scheme, using spaces to force word segmentation, and then using span to fake the last line (test-justify will not align the last line).

In order to increase scalability, we have to optimize this solution, because in most cases the text is loaded on the backend.

For example: How to write .net core razor view loading model displayname

<label asp-for="Email"></label>

Just add a small piece of js and it should be compatible with all scenarios.
css

div {
    width: 300px;
    border: 1px solid #000;
}
.test-justify {
    text-align: justify;
}
span {
    display:inline-block;
    padding-left:100%;
}

html

<div class="test-justify">
    测试文本
</div>

js

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

Okay, this solution should work It supports mainstream browsers, but the disadvantage is that it is re-adjusted through js, so when you refresh it, you will see the process of aligning both ends of the text (flash). The experience is not very good, so make it compatible.

Only IE and Safari do not support text-align-last: justify so call the last solution only considering these two browsers

function 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)) {
        return "Firefox";
    } else if (isIE) {
        return "IE";
    } else if (isEdge) {
        return "IE";
    } else if (isIE11) {
        return "IE";
    } else if (/[Cc]hrome\/\d+/.test(userAgent)) {
        return "Chrome";
    } else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
        return "Safari"
    } else {
        return "unknown"
    }
}

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

Done!

Recommended video tutorial: css video tutorial

The above is the detailed content of How css solves the problem of text compatibility under different browsers. For more information, please follow other related articles on the PHP Chinese website!