<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;font-family:微軟雅黑;color:#555} a{text-decoration:none} 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 a{display:inline-block;text-align:center} h2{text-align:center;padding:10px 0} </style> </head> <body> <!-- 只有一行時居中顯示文字，多行居左顯示，最多兩行超過用省略號結尾 --> <div class="container"> <h2><a href="###"><em>我是單行標題居中</em></a></h2> <h2><a href="###"><em>我是兩行標題兩行標題兩行標題居左</em></a></h2> <h2><a href="###"><em>我是超過兩行的標題最后點號省略我是超過兩行的標題最后點號省略標題最后點號省略</em></a></h2> </div> </body> </html>