只有一行时居中显示文字，多行居左显示，最多两行超过用省略号结尾 

<!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}
        .container{width:220px;padding:0 10px;margin:10px auto;background:#ddd}
        .container a{display:inline-block;text-align:center}
        h2{text-align:center;padding:10px 0; font-size:12px; font-weight:normal;}
        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}
    </style>
</head>
<body>
 
<!-- 一行居中显示文字，两行居左显示，超过两行只显示两行用省略号结尾 -->
<div class="container">     
    <h2><a href="###"><em>Nginx 从入门到实践，万字详解！</em></a></h2>
    <h2><a href="###"><em>深入webpack打包原理，loader和plugin的实现</em></a></h2>
    <h2><a href="###"><em>React hooks + Mobx + typescript + EggJs从0到1打造一款仿网易云音乐APP（一）</em></a></h2>
</div>
 
</body>
</html>

　　

 

posted @ 2016-10-10 14:26  菜蛋  阅读(1237)  评论(0)  编辑  收藏  举报