Compatible text justification under different browsers

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

The rough Way is to label the text that needs to isolate the margins, and then control the margins for each text separately, which is more accurate than just adding spaces or placeholders, which I've done before. But when you write more, you start to think about whether you can abstract it out for more scenes. Make the code look better? Lower maintenance costs?

1, the first thought is can directly rely on CSS to solve the problem

Css

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

Html

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

Well,text-align:justify completely invalid, not reconciled, so with a text test, the effect is as follows:

It turns out that this property is aligned to the end of the paragraph text, and then try text-align-last:justify this property

Css

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

The effect is achieved, but the disadvantage is completely incompatible with IE and the Safari browser.

2, then think, since the implementation of the above compatibility issues, then can be 2, 3, 4, such as the length of the text to write a separate CSS class to solve, because the form text box prompt text will not be many.

Css

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

Html

<Div class=< Span class= "hljs-string" > "W2" > test </div><div class=< Span class= "Hljs-tag" > "W3" > tested </div><div> test came </< Span class= "Hljs-name" >DIV>             

This scenario is referenced from blog.csdn.net/muyutingfeng2008/article/details/48263073

This solution seems to solve the problem, the majority of the scene should be no problem, but unfortunately not the true two-way alignment, the special display of the situation is still unable to meet the demand, we first put, continue to try.

2, the above is a pure CSS implementation, next we look at CSS and Dom can be combined to make a unified form of the solution.

Html

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

Css

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

Think of some small excitement, and the perfect compatibility with IE and Safari, this is actually the first paragraph alignment scheme extension, with a space to force participle, and then use span to forge the last line (Test-justify does not align the last line).

To increase extensibility, we also have to optimize this scenario, because in most cases the text is loaded back-end.

例如.net core razor视图加载model displayname的写法<label asp-for="Email"></label>

Just add a small section 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" : span class= "va" >$this. Height ()/2 +  "px" } )                

Well, this program should be able to support the mainstream browser, but the drawback is due to JS re-adjustment, so when the refresh time to see the text at the end of the process of alignment (Flash), the experience is not very good, then do a compatible bar.
Only IE and Safari do not support text-align-last:justify So the last scenario is called only when the two browsers are considered

function Mybrowser(){var useragent=Navigator.UserAgent;Determine browser versionvar 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";}Elseif (Isie){Return"IE";}Elseif (Isedge){Return"IE";}Elseif (isIE11){Return"IE";}Elseif (/[Cc]Hrome\/\d+/.Test (useragent)){Return"Chrome";}Elseif (/[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" : span class= "va" >$this. Height ()/2 +  "px" } ) }                

hahaha, perfect!

The first time to write a blog, point a praise Bai, if there is a better solution, welcome message ~ ~ ~

Added: Because the space increases the word spacing, in order to achieve the best rendering effect can be arbitrarily added a limit word margin word-spacing: -10px

Compatible text justification under different browsers