解决单行文本两端对齐

需要实现单效果

实现两端对齐，首相想到到到是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

 

 

方法二：

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行,

    span:first-child{
      display: inline-block;
      width: 100px;
      text-align: justify;
      vertical-align: top;
    }
    span:first-child::after{
      display: inline-block;
      width: 100%;
      content: '';
      height: 0;
    }

完整代码：

 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       display: inline-block;
11       width: 100px;
12       text-align: justify;
13       vertical-align: top;
14     }
15     span:first-child::after{
16       display: inline-block;
17       width: 100%;
18       content: '';
19       height: 0;
20     }
21     span:nth-child(2){
22       padding-right:15px;
23     }
24   </style>
25 </head>
26 <body>
27   <ul>
28     <li>
29       <span>姓名</span>
30       <span>:</span>
31       <span>哈密瓜</span>
32     </li>
33     <li>
34       <span>出生年月</span>
35       <span>:</span>
36       <span>2019-07-04</span>
37     </li>
38     <li>
39       <span>性别</span>
40       <span>:</span>
41       <span>女</span>
42     </li>
43   </ul>
44 </body>
45 </html>
index.html

 

posted @ 2019-07-04 11:07  最爱小虾  阅读(1317)  评论(0)  编辑  收藏  举报