CSS3 文本效果

       @ 简单总结一下css3文本效果吧！

1、文本边框阴影
        .shadow1{
            margin: 100px auto;                                                
            border: 2px solid #CCCCCC;
            width: 300px;                                               
            height: 200px;                                                  /*这里因为没有实际内容，so给出高度*/
            text-shadow: 5px 3px 2px #008000 ;            /* 水平偏移距离 垂直偏移距离 [模糊距离] [颜色] */
        }

 2、文本自动换行（主流浏览器都支持） 
               /* word-wrap: normal | break-word;*/
      
        .wrap p{
            /* word-wrap: normal | break-word; */
        }

3、单词拆分（主流浏览器都支持）
                word-break: normal|break-all|keep-all; */
        .wrap p{
            /* word-break:keep-all; */
        }

4、文本溢出
        1)单行文本溢出（重要）
            text-overflow: clip | ellipsis | string;*/

             需要结合:  white-space: nowrap;        overflow: hidden;  使用
            /* 处理文字溢出样式： */
            .wrap p{
                width: 90%;
                white-space: nowrap;                         /* 为不允许折行 */
                -ms-text-overflow: clip;                         /* 处理IE兼容 */
                text-overflow: clip;
                overflow: hidden;                                       /*处理文本溢出不要忘记清除浮动*/
            }
         2)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）
                width: px/%/em/rem...;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 行数;
                overflow: hidden;