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

最新推荐文章于 2021-02-23 13:27:11 发布

weixin_30552635

最新推荐文章于 2021-02-23 13:27:11 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/iloveyou-sky/p/5945687.html

版权

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

我是单行标题居中

我是两行标题两行标题两行标题居左

我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略

转载于:https://www.cnblogs.com/iloveyou-sky/p/5945687.html

weixin_30552635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
只有一行时居中显示文字，多行居左显示，最多两行超过用省略号结尾

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;font-family:微软雅黑;...
复制链接

扫一扫