css两行文字两端对齐

ゞ 浴缸里的玫瑰 2023-07-18 06:53 339阅读 0赞

效果如下：

20200325091008688.png

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>JS Bin</title>
  6.     <style>
  7.         span{
  8.             display:inline-block;
  9.             width:4.5em;
  10.             text-align:justify;
  11.             font-size:20px;
  12.             overflow:hidden;
  13.             height:20px;
  14.             line-height:20px;
  15.         }
  16.         span:after{
  17.             content:"";
  18.             display:inline-block;
  19.             width:100%;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <span>一字</span><br/>
  25. <span>两个字</span><br/>
  26. <span>有四个字</span>
  27. </body>
  28. </html>

发表评论

表情：
评论列表 （有 0 条评论，339人围观）

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

相关阅读

    相关 css实现内容两端对齐

    问题描述： 因行边缘出现符号或其它情况导致 行边缘出现多余的空白，如何解决内容区域边缘不期望的空白呢？ ![在这里插入图片描述][20201224102447758.p

    快来打我*快来打我*/ 0 赞/ 361 阅读

    相关 css 文本两端对齐

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

    你的名字你的名字/ 0 赞/ 786 阅读