1.ie8 float 布局 去浮动
2.flex
居中
http://css3generator.com/
http://www.ayqy.net/doc/css2-1/cover.html
3.汉字对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ border: 1px solid red; font-size: 20px; } span{ /* border: 1px solid green; */ display: inline-block; width: 5em; text-align: justify; line-height: 20px; font-size: 20px; height: 20px; overflow: hidden; } span::after{ content: ''; display: inline-block; width: 100%; border: 1px solid blue; } </style> </head> <body> <div> <span>姓名</span><br> <span>联系方式</span> </div> </body> </html>
4.li横向排列去空格 去浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{margin: 0;padding: 0;list-style: none;} ul>li{/* display: inline-block; */float: left;border: 1px solid red; } .clearfix::after{content: '';display: block;clear: both;} </style> </head> <body> <div> <ul class="clearfix"> <li>选项1</li> <li>选项2</li> <li>选项3</li> <li>选项4</li> <li>选项5</li> <li>选项6</li> </ul> </div> </body> </html>
5.文字中断 word-break:break-all
6.文字不换行white-space:nomal
7. 单行文字溢出省略...
<style> div{ width: 300px; border: 1px solid red; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style>
8.多行文字溢出省略...
<style> div{ width: 300px; border: 1px solid red; overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } </style>