css 实现单行居中，多行居左省略

—– START —–

单行居中实现很简单，多行居左也很简单，多行省略也就是几行代码的事情

看HTML

最基本的HTMl架构，容器是div，

代码很简单，这个代码可以实现单行居中，也可以实现多行居左
为什么？
利用 inline-block 元素可以被父级 text-align:center 居中的特性，这样就可以实现单行居中，多行居左

下面是多行文本超出的省略，这个也简单，借用css3中的box的 orient 和 line-clamp这两个属性，

代码这样写，会使得多行文本溢出省略，不过单行状态下，仍然居左，不是单行居中效果
为什么？
css代码中，两个display的属性会重复执行

怎么办？

解决办法是更改HTML结构：

在span外增加标签，

在em上实现inline-block的特性，在span中实现多行文本溢出效果，一举两得

—– FINISH —–