This is a very compatible vertical center layout: 1. Good compatibility, compatible with IE8 2. The width and height of the center element can be fixed or percentage. 3. ADAPTS to changes in the browser window

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin:0; } html,body{ width: 100%; height:100%; } .box{ width: 100%; height: 100%; background:#fff; position: relative; } .center{ width: 20%; height:20%; position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto; background:#ccc; border:1px solid red; } </style> </head> <body> <div class="box"> <p class="center"> This is a very compatible vertical center layout :<br/> 1. Good compatibility, compatible to IE8 <br/> 2. Center element width and height can be fixed or percentage <br/> 3. Ability to adapt to browser window changes </p> </div> </body> </ HTML >Copy the code

Second, style ellipsis

CSS implementation displays ellipsis /* Displays one line, ellipsis */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; /* Display two lines, ellipses */ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;Copy the code