CSS to achieve compatible text alignment in 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:

A more crude approach is to add tags to the text that needs to be isolated by margins, and then control the margins of each word separately. This method is more accurate than directly adding spaces or placeholders, and I have done this before. But after writing more, I began to wonder if it could be abstracted and used in more scenarios? Make the code look better? Lower maintenance costs?

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">
        Test text</div> 

Well, text-align:justify is completely ineffective, so I tested it with a piece of text, and the effect is as follows:

It turns out that this property is for aligning the text at both ends of a paragraph. Next, try text-align-last: justify property.

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 we write separate CSS classes for texts of 2, 3, 4, etc. lengths to solve the problem? Because the text box prompts in the form will not have many words.

CSS

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

html

<div class="w2">Test</div>
<div class="w3">Tested</div>
<div>Test is coming</div> 

This solution seems to be able to solve the problem and should be able to handle most scenarios, but unfortunately it is not truly aligned at both ends and still cannot meet the needs in special display situations. Let's put it aside for now and continue trying.

2. The above is a pure CSS implementation. Next, let's see if we can combine CSS and DOM to create a unified solution.

html

<div class="test-justify">
    Test text <span></span>
</div>

CSS

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

I am a little excited when I think about it, and it is perfectly compatible with IE and Safari. This solution is actually an extension of the first paragraph alignment solution. It uses spaces to force word separation, and then uses 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 from the backend.

For example, the .net core razor view loads the model displayname as written in <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">
    Test text</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" }); 

Well, this solution should be able to support mainstream browsers, but the disadvantage is that since it is adjusted through js, if you look carefully when refreshing, you will see the process of text alignment (flashing), the experience is not very good, so let's make it compatible.
Only IE and Safari do not support text-align-last: justify , so only consider these two browsers and call the last solution

function myBrowser() {
    var userAgent = navigator.userAgent;

    //Determine the browser version 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" })
}

Hahahaha, perfect!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.