Css+js Resolve text justification and scatter-align __js

A very simple design layout style, a figure represents left to it, but in fact what we want may be the alignment shown in B.

This is the legendary two-sided alignment. There is also a more precise statement that the ends are distributed aligned.

In the beginning, I tried to use CSS to solve this small problem, looked at a number of ways to find that there is no perfect compatible solution.

In some csser the use of a CSS justification is based on text-align:justify and text-align-last:justify implementations to solve the problem, but you need to add a space after each word.

The idea is this:

Principle: By adjusting the space between words to achieve, so need to be in advance in each word and Chinese characters are inserted into a space.

ie under text-align:justify; Can have a role to play. So it's easy to implement under IE:

p { 
text-align:justify;
text-align-last:justify;
}

Text-align-last under FIREFOX12-17 still processing experimental support phase, need prefix-moz-,ff under this implementation

p{
text-align:justify;
-moz-text-align-last:justify;
}

Chrome, Safari, opera to achieve more trouble: Chrome23, Safari5.1.7, Opera12.11 does not support Text-align-last, but support text-align jsutify, text-align:j Ustify does not handle the last line of text within a block, which includes only one line in a block, is both the first and last line, and is justified by the lines that are forced to be interrupted, but the other rows are processed, so you just need to turn the single line here into multiple lines. Then we can derive new rows using pseudo objects so that no extra processing of the HTML code is required, and then the derived new lines are hidden ...

p{
Overflow:hidden;
height:20px;
text-align:justify;
}

p:after{
Display:inline-block;
Content: ';
Overflow:hidden;
width:100%;
height:0;
}

In this way, we can basically achieve the desired effect.
But the method I'm trying to recommend today is not the way it is, the above method is really available in the static page, but the end of the increase in space for the data is more than a bit of trouble, and if the text is dynamic or the text is submitted by the user, we can hardly control the text to add space. So, my idea is to change the text letter-spacing through the script to achieve the text at both ends of the distributed alignment.
The emphasis is on algorithms:
First, let's look at the picture below

Four lines, the number of Chinese characters are 2, 2, 4, 3
We want to achieve the effect of B only a few other lengths are the same as the longest 4 characters, where we have to increase the gap between the other lines, we use EM units to achieve.
Obviously, we align the 第1-2 rows by adding 2em to the letter-spacing, and how much em to add to line fourth.
The calculation method needs to increase the gap length = (4-3)/2 namely (maximum number of text-current text count)/(current text number-1)
Verify that:
Name needs to increase the letter-spacing value = (4-2)/(2-1) =2 the same gender is also calculated
The formula is: the current text needs to increase the length = (maximum length-current length)/(current length-1)
It's a good way to do it.
The code in HTML is as follows

<p class= "T1" > Name </p>
<p class= "T1" > Sex </p>
<p class= "T1" > Hobby </p>
<p class= "T1" > Motto </p>

JQ a script that aligns the lines of the specified style.

function Justify_let (obj) {
 	var obj=$ (obj);
    var lengths=[];
    Obj.each (function () {
    	Lengths.push ($ (this). Text (). length);

    });
    var smax=math.max (lengths);
    if (lengths.length==0) {return;}
    for (Var i=0,smax=lengths[0],len=lengths.length;i<len;i++) {
    	if (Lengths[i]>smax) {
    		smax=lengths[i];
    	}
    }

    for (Var i=0,len=lengths.length;i<len;i++) {
    	var currlen=lengths[i];
    	if (Currlen==smax) {continue;}
    	Obj.eq (i). css ({"letter-spacing": (Smax-currlen)/(currlen-1) + "Em"});
    

HTML page Call method

<script type= "Text/javascript" >//<! [Cdata[
Justify_let (". T1")
//]]></script>

That's a good way to deal with this.
Advantages:
1, no need to add extra space or empty characters or blank lines
2, the dynamically added text also takes effect
3, the user entered the text also applies
4, regardless of how many lines will automatically justify

Disadvantages:
1, need to use JS and JQ script implementation, adding a script request.
2, currently can only support each line is Chinese characters or each line is English, because the calculation is the length of text.
3, multiple-line case of the existence of the same situation has not yet been able to achieve compatibility.

Original article, reprint please indicate the source. Welcome to reprint.