標籤:har over box 1.0 text 多行 charset device lang
單行置中,多行居左,超過兩行用省略符號
<!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)——單行置中,多行居左,超過兩行用省略符號