几个常用CSS小技巧

1、表单标题上下字体对齐方法

项目中经常遇到各种表单，表单标题上下对齐是一个很常见的需求，但标题的字数通常并不一样如“用户名”，“密码”，为了使用户名和密码上下对齐在密码中加三个 ；

可以看到上下的字体两端并没有对齐，因为不同字体的一个空格宽度并不一定等于一个字的宽度，所以用空格对齐的这种办法是不行的。这里我们可以接借助text-align: justify;这个属性解决这个问题。具体的实现思路就是利用text-align: justify;实现两端对齐，但是text-align: justify;属性只对两行以上的段落生效，解决办法可以在文字容器内再加一个伪类，然后溢出隐藏多余的伪类。具体代码如下

    
        
        
    
    
        

            用户名

            密码
        
    

效果图

2、强制英文换行

新手常遇到的一个问题是在html中英文单词不会自动换行，可以加上一个连字符解决换行问题，也可以使用word-break:break-all这条属性来使英文换行。

3、单行溢出隐藏

单行溢出隐藏在工作或者面试中也是经常会用到的。

  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;

4、多行溢出隐藏

text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;