CSS 常用效果整理

整理场景的css

###目录
1、

1、使用 text-align-last 对齐两端文本

代码

<div class="bruce flex-ct-x">
  <ul class="justify-text">
      <li>账号</li>
      <li>密码</li>
      <li>电子邮件</li>
      <li>通讯地址</li>
  </ul>
</div>

.justify-text {
  li {
      margin-top: 5px;
      padding: 0 20px;
      width: 100px;
      height: 40px;
      background-color: #f66;
      line-height: 40px;
      text-align-last: justify;
      color: #fff;
      &:first-child {
          margin-top: 0;
      }
  }
 }

效果

2、css文本超出隐藏显示三个点

文本超出显示三个点一般分两种情况
　　一,单行文本超出隐藏
　　　overflow:hidden;
　　　text-overflow:ellipsis;
　　　white-space:nowrap;
　　二,多行文本超出隐藏
　　　　text-overflow: -o-ellipsis-lastline;
　　　　overflow: hidden;
　　　　text-overflow: ellipsis;
　　　　display: -webkit-box;
　　　　-webkit-line-clamp: 3; //行数需设置
　　　　line-clamp: 3;
　　　　-webkit-box-orient: vertical;
单行设置宽 多行设置宽高不然不会生效

参考
网页布局