html {

    filter: grayscale(100%);//IE浏览器

   -webkit-filter: grayscale(100%);//谷歌浏览器

   -moz-filter: grayscale(100%);//火狐

   -ms-filter: grayscale(100%);

   -o-filter: grayscale(100%);

   filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

   -webkit-filter: grayscale(1);//谷歌浏览器

 }

 <div id="test" contentEditable="true"  ></div>  

 <div id="test1" contentEditable="true" ></div>  

  <div id="test2" contentEditable="true"></div> 

 <div unselectable="on" onselectstart="return false;">

 试试看能否选择

 </div>

 ::-webkit-input-placeholder { /* WebKit browsers */

     color:    #999;

 }

 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */

     color:    #999;

 }

 ::-moz-placeholder { /* Mozilla Firefox 19+ */

     color:    #999;

 }

 :-ms-input-placeholder { /* Internet Explorer 10+ */

     color:    #999;

 }

 .clearfix:after{display:block;visibility:hidden;clear:both;height:;content:'.';font-size:}

 {display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

 //自动换行

 div{

 word-wrap: break-word;

 word-break: normal;

 }

 //强制英文单词断行

 div{

 word-break:break-all;

 }

 //强制不换行

 div{

 white-space:nowrap;

 }