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

约定不等于承诺〃 2022-04-24 05:30 678阅读 0赞

假如一个页面需要填写姓名和联系方式，为了使样式美观，通常需要文字两端对齐，即“姓”和“联”对齐，“名”和“式”对齐，通常情况下是很难对齐的：  
![在这里插入图片描述][20190417231317553.png]  
这边有个小技巧，就是利用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>
    ```

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

[20190417231317553.png]: /images/20220218/1f1f116310f4484f8a0737faefe9199b.png
[20190417231513992.png]: /images/20220218/1cc163dcb4484e529549159e34fe9bb2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，678人围观）

还没有评论，来说两句吧...

相关阅读

相关文字两端对齐

1. 文字两端对齐 text-align-last:justify; text-align:justify;

我不是女神ヾ/ 2023年07月23日 03:31/ 0 赞/ 35 阅读

相关 css两行文字两端对齐

效果如下： ![20200325091008688.png][] <!DOCTYPE html> <html> <head> <me

ゞ浴缸里的玫瑰/ 2023年07月18日 06:53/ 0 赞/ 194 阅读

相关 CSS 文字两端对齐

最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。预览效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

左手的ㄟ右手/ 2023年06月07日 10:41/ 0 赞/ 19 阅读

相关文字两端对齐

文字两端对齐 text-align-last:justify 属性规定如何对齐文本的最后一行。适用于文本只有一行的时候 [见参考][Link 1] ![在这里

爱被打了一巴掌/ 2023年03月04日 11:22/ 0 赞/ 25 阅读

相关浅谈3种css技巧——两端对齐

在出里文字比较多的网页，文字对齐其中采用的两端对齐，两端对齐的方法有三种方法，如下： 1. 使用text-align:justify text-align:justify

ゝ一纸荒年。/ 2022年11月24日 14:27/ 0 赞/ 254 阅读

相关 CSS——解决文本溢出／自动换行／文字两端对齐

1 单行文本溢出 .text{ width: 100px;//宽度要定义好 overflow: hidden;//溢出隐藏

青旅半醒/ 2022年05月23日 02:45/ 0 赞/ 443 阅读

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

假如一个页面需要填写姓名和联系方式，为了使样式美观，通常需要文字两端对齐，即“姓”和“联”对齐，“名”和“式”对齐，通常情况下是很难对齐的： ![在这里插入图片描述][20

约定不等于承诺〃/ 2022年04月24日 05:30/ 0 赞/ 679 阅读

相关 CSS :after伪类元素实现文字两端对齐

以前很多人都这么干过：两个字中间使用来隔开达到四个字的宽度，三个字也可以，但是，如果文字中包含有数字、大小写英文字母时，比如 “122账号”“abc密码” 这样的，就不好计算

た入场券/ 2022年03月18日 10:08/ 0 赞/ 748 阅读

相关 CSS 文字两端对齐

<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equ

电玩女神/ 2021年10月23日 16:22/ 0 赞/ 444 阅读

相关 css 文本两端对齐

在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地。这样我们就要用到 text-align， text-justify样式了。 text-alig

你的名字/ 2021年05月12日 11:51/ 0 赞/ 663 阅读