CSS3 summary: text-align: justify (align both ends)

Everyone knows that the text-align attribute specifies the horizontal alignment of the text in the element. The most commonly used values are left, right, and center. So what is justify?

　　This is what it says on the W3C:

　　　　justify can make both ends of the text justified in justified text, and the left and right ends of the text line are placed on the inner border of the parent element. Then, adjust the spacing between words and letters so that the lines are exactly the same length (with some problems)

Let's take a simple example first:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .demo{
            width: 70px;
            /*text-align: justify;*/
        }
    </style>
</head>
<body>
    <div class = 'demo'>
        <p>Flying and sending fd to fasdf province sdf and sending f to fdfd big df husband df Sa</p>
    </div>
</body>
</html>

The above example shows normal

Let's talk about the problems caused by the text-algin:justify attribute

1. [Single line setting text-align:justify does not work]

Let's look at an example first:

<p class="center">I am justified text end-aligned text</p>
.center{
  text-align:justify;
}

We found that it is invalid to set the text-align:justify attribute when the paragraph is a single line. After checking it, we found out (for the following reasons):

text-align will not deal with the broken line and the last line, because the text here only occupies one line and is also the last line, so setting text-align to justify will not have any effect

Workaround: Use text-align-last, and set it to justify. Unfortunately, text-align-last is not supported by all browsers.

So for those who do not support text-align-last, you can manually generate two lines of text in the last line, and then hide the second line, then the first line we want to achieve can naturally be aligned at both ends

This problem was encountered in my project. Since I found this problem to be infeasible, various used. But I found that Microsoft Yahei does not recognize etc. in safari, so I can only find a solution. Finally found a solution in the source code of Kaixin. The specific idea is:

　　First of all, since a single line is not enough, use multiple lines. But how to use a single line? - (1) Adding tags with after or (2) is to artificially generate two lines of text in the last line, and then hide the second line, then the first line we want to achieve can naturally be aligned at both ends

Scheme 1: (the principle is the same as scheme 2, hide the second row; but you need to set span to float: left, and :after to inline-block)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            width: 100px;
            text-align: justify;
            float: left;
        }
        span:after{
            content:'.';
            width: 100%;
            display: inline-block;
            overflow: hidden;
            height: 0;
        }
        input{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span>昵称</span>：<input type="text" style = 'width: 100px'><br><br>
        <span>电子邮箱</span>：<input type="email" style = 'width: 100px;'>
    </div>
</body>
</html>

方案二：（添加标签，原理隐藏第2行）

<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
  text-align:justify;
}
span{
  display:inline-block;
  width:100%;
  height: 0;
  margin: 0;
}

2.【IE兼容问题】

text-align:justify可以使文字两端对齐，但IE下不正常

方案：

ie兼容属性text-justify，给div加上text-justify:inter-ideograph; 在ie下效果就正常了，text-justify只在ie下有用，而且必须和text-align:justify一起使用才有效

3.【应用举例】

如果这个方法排版会是怎样的呢？

<ul class="justify_list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<style type="text/css">
    .justify_list{text-align: justify;text-justify:distribute-all-lines;width: 600px;}
    li{width:100px;    height:100px;background-color: #0086b3;    
       display: inline-block; list-style:none; }
</style>

效果：第二行显示错乱

经过查询才知道原来是text-align:justify 不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）

既然如此，解决方法就简单了：

.justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;
                     overflow: hidden;content: '';}

总体来说实现得还不错。在排版的时候不需要计算每个列表元素间的margin间距，比用float的时候省事很多。

4.【好处】

简单方便，只要一个简单的text-align:justify声明，里面的元素就自动等间距两端对齐布局啦！根本无需计算每个列表元素间的margin间距，更不用去修改父容器的宽度

【总结】

①text-align一行文本不进行处理，还有就是强制换行的也不处理

CSS3 summary: text-align: justify (align both ends)

Guess you like