css实现一行居中显示，两行靠左显示，超过两行以引号省略 

<!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>

 

posted @ 2017-04-06 13:56  LIULIULIU666  阅读(1935)  评论(0)    收藏  举报