常用的css处理技巧

1.如何使文本溢出边界不换行强制在一行中显示

   test{
            width: 50px;
            white-space: nowrap;

        }

2.如何清除浮动，两种方式。

a. #test{clear: both;}      #test为浮动元素的下一个兄弟元素
b. #test{overflow: hidden;  }       #test为浮动元素的父容器的样式

3.如何去掉超链接点击后的虚化线

  a{outline:none;}  
  注：ie7及更早的浏览器不支持该属性，需要通过js的blur()方法实现 ，如<a onfocus="this.blur();"

4.如何使连续的长字符串自动换行

   .tset{
          width: 120px;
          word-wrap: break-word;  
        }
     注：word-wrap的break-word值允许单词内换行、

5.如何限制文本描述的高度，超出文本边界显示为省略号

 .desc1{
        display: -webkit-box;
        display:-moz-box;
        display:-o-box;
        display:-ms-box;
        display:box;
        overflow: hidden;  
        height:35px;  //设置文本的高度
        text-overflow: ellipsis;  //当对象内文本溢出时显示省略标记...
        white-space: normal!important; 
        word-wrap: break-word; // 内容将在边界内换行。如果需要，单词内部允许断行。 
        -webkit-box-orient: vertical;  //属性规定框的子元素应该被垂直排列。
        -webkit-line-clamp: 1;  //块元素显示的文本的行数。

  }

6.如何让单行文本在容器内垂直居中？

#test{height:25px;line-height:25px;}   //只需设置文本的行高等于容器的高度即可

7.如何设置内联元素的宽高

span{display:block;width:200px;height:100px;}