css实现一行文字左右靠边对齐

时间：2024-03-31 12:54:21

最近在铺页面时，设计给到的布局是这样子滴。。。
css实现一行文字左右靠边对齐

额。。。是很常见，但之前还真没有去写过，百度了下做法，有两种方法
1、css属性实现 text-align-last: justify
很神奇的属性，以前一直不知道它的存在，用法也简单，下面是我的css实例：

    // 这是一行的完整less 
    .item {
        height: auto;
        font-size: 0.8em;
        overflow: hidden;
        padding: 0px 20px;
        .item_title {
          width: 110px;
          height: 30px;
          float: left;
          overflow: hidden;
          text-align: justify;
          text-align-last: justify;
        }
        .item_content {
          width: calc(~"100% - 112px");
          height: auto;
          overflow: hidden;
          float: right;
          letter-spacing: 0.1em;
        }
      }

我认为使用它生效的前提：
1、明确的宽度
2、需设定text-align: justify;属性

既然有这么好的方法，为什么会出现第二种解决方法嘞？？是因为有Safari的存在，任性的它并不支持这个神奇的属性
css实现一行文字左右靠边对齐

2、css伪类实现 :after
这种实现方法就没有了浏览器的限制，css代码如下：

     // 这是一行的完整less 
      .item {
        height: auto;
        font-size: 0.8em;
        overflow: hidden;
        padding: 0px 20px;
        .item_title {
          width: 110px;
          height: 30px;
          float: left;
          overflow: hidden;
          text-align: justify;
          text-align-last: justify;
          &:after {
            content: '';
            display: inline-block;
            width: 100%;
          }
        }
        .item_content {
          width: calc(~"100% - 112px");
          height: auto;
          overflow: hidden;
          float: right;
          letter-spacing: 0.1em;
        }
      }

原理：我认为像text-align这种属性要在文字多余两行时，它的justify才生效，而我们只有一行文字，所以需要用伪类去另起一行撑起第二行。。。顺便还有一点，当伪类另起一行撑起第二行时，我们页面上这一行的高会特别高，如果你不想这样，就可以把类的高度设一个值

伪类是个很厉害的东西，很多用js和css实现不出来的功能，都能借助于它

当然，除了上面两种方法还有其他方法。。。我就不写啦，可以百度一下，你就知道了

如果代码有任何问题，请留言给我，谢谢????

相关文章