CSS小技巧之两行文字两端对齐

最新推荐文章于 2024-05-23 17:50:15 发布

方小圆

最新推荐文章于 2024-05-23 17:50:15 发布

阅读量6.2k

点赞数 1

分类专栏：技术

本文链接：https://blog.csdn.net/fengfangyuan/article/details/89367363

版权

技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

假如一个页面需要填写姓名和联系方式，为了使样式美观，通常需要文字两端对齐，即“姓”和“联”对齐，“名”和“式”对齐，通常情况下是很难对齐的：
在这里插入图片描述
这边有个小技巧，就是利用text-align:justify+伪类，实现方式如下：

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    span{
      display:inline-block;
      /* border:1px solid red; */
      width:4.5em;
      text-align:justify;
      font-size:20px;
      overflow:hidden;
      height:20px;
      line-height:20px;
    }
    span:after{
      content:"";
      display:inline-block;
      width:100%;
      border:1px solid green;
    } 
  </style>
</head>
<body>
  <span>姓名</span><br>
  <span>联系方式</span>
</body>
</html>
```

在这里插入图片描述
为什么要用伪类？
因为text-align:justify;可以实现文本两端对齐，只对换行文本生效，这个伪类相对于让文本换行。

方小圆

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS小技巧之两行文字两端对齐

假如一个页面需要填写姓名和联系方式，为了使样式美观，通常需要文字两端对齐，即“姓”和“联”对齐，“名”和“式”对齐，通常情况下是很难对齐的：这边有个小技巧，就是利用text-align:justify+伪类，实现方式如下：```<!DOCTYPE html><html><head> <meta charset="utf-8"> &...
复制链接

扫一扫