CSS特效(7)——單行居中,多行居左,超過兩行用省略號
阿新 • • 發佈:2018-09-07
block lang overflow normal ips http init lin amp
單行居中,多行居左,超過兩行用省略號
<!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> * { margin: 0; padding: 0; } h2 em { position: relative; font-style: normal; text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .container { width: 320px; padding: 0 10px; margin: 10px auto; background: #ddd; } .container p { display: inline-block; text-align: center; } h2 { text-align: center; padding: 10px 0; } </style> </head> <body> <div class="container"> <h2> <p> <em>我是單行標題居中</em> </p> </h2> <h2> <p> <em>我是兩行標題兩行標題兩行標題居左</em> </p> </h2> <h2> <p> <em>我是超過兩行的標題最後點號省略我是超過兩行的標題最後點號省略我是超過兩行的標題最後點號省略省略省略</em> </p> </h2> </div> </body> </html>
CSS特效(7)——單行居中,多行居左,超過兩行用省略號