谈谈一些有趣的CSS题目（五）--单行居中，两行居左，超过两行省略

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

所有题目汇总在我的 Github 。

5、单行居中显示文字，多行居左显示，最多两行超过用省略号结尾

这题就厉害了我的哥。

题目就是如上要求，使用纯 CSS，完成单行文本居中显示文字，多行居左显示，最多两行超过用省略号结尾，效果如下：

不愿看长篇大论的可以先看看效果：-webkit- 内核下 Demo 戳我

接下来就一步一步来实现这个效果。

首先是单行居中，多行居左

居中需要用到 text-align:center ，居左是默认值也就是 text-align:left 。如合让两者结合起来达到单行居中，多行居左呢？这就需要多一个标签，假设一开始我们定义如下：

单行居中，多行居左
 

查看更多关于谈谈一些有趣的CSS题目（五）--单行居中，两行居左，超过两行省略的详细内容...