標籤：pat vertica 多行 padding set pos cal initial 置中
單行置中，多行居左，超過兩行用省略符號（絕對位置）<!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; } .container { width: 320px; margin: 10px auto; background: #ddd; position: relative; } h2 { position: relative; line-height: 30px; margin: 10px 0; } p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pesudo { position: absolute; width: 100%; height: 30px; overflow: hidden; top: 0; background: #ddd; text-align: center; } </style></head><body> <div class="container"> <h2> <p>我是單列名置中</p> <p class="pesudo">我是單列名置中</p> </h2> <h2> <p>我是兩列名兩列名兩列名居左</p> <p class="pesudo">我是兩列名兩列名兩列名居左</p> </h2> <h2> <p>我是超過兩行的標題最後點號省略我是超過兩行的標題最後點號省略</p> <p class="pesudo">我是超過兩行的標題最後點號省略我是超過兩行的標題最後點號省略</p> </h2> </div></body></html>CSS特效（8）——單行置中，多行居左，超過兩行用省略符號（絕對位置）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
