解决单行文本两端对齐

需要实现单效果

解决单行文本两端对齐

实现两端对齐，首相想到到到是justify，但justify对最后一行无效，通常这样的排版对整段文字是极好的，我们并不希望当最后一行只有两个字时也两端对齐，毕竟这是不便于阅读的，那么当我们只有一行文本，但要实现单行文本两端对齐怎么解决？

方法一：

属性text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

    span:first-child{
      text-align: justify;
      text-align-last: justify;
      display: inline-block;
      width: 100px;
    }
    span:nth-child(2){
      padding-right:15px;
    }

不过该属性有兼容性问题，大家可以根据情况决定实现方式，想了解更多关于text-align-last的说明。

参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title></title>
 8   <style>
 9     span:first-child{
10       text-align: justify;
11       text-align-last: justify;
12       display: inline-block;
13       width: 100px;
14     }
15     span:nth-child(2){
16       padding-right:15px;
17     }
18   </style>
19 </head>
20 <body>
21   <ul>
22     <li>
23       <span>姓名</span>
24       <span>:</span>
25       <span>哈密瓜</span>
26     </li>
27     <li>
28       <span>出生年月</span>
29       <span>:</span>
30       <span>2019-07-04</span>
31     </li>
32     <li>
33       <span>性别</span>
34       <span>:</span>
35       <span>女</span>
36     </li>
37   </ul>
38 </body>
39 </html>

index.html