CSS 常用效果整理

整理场景的css

灵活运用CSS开发技巧

###目录
1、

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

  
    
  
        
  账号
        
  密码
        
  电子邮件
        
  通讯地址
    
  
  
  .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;
单行设置宽 多行设置宽高不然不会生效

参考
网页布局