自适应布局-webkit-box布局实现文字内容过长自动换行，超出规定行数部分省略号隐藏

当文字内容超出div的规定宽度时，最好的解决办法是进行换行处理。当换行达到一定的行数时，我们就可以通过省略号来进行隐藏处理，达到显示大致内容的目的。这也是我在写博客系统时遇到的一个问题，在博客列表不需要将博客的内容全部展示出来，只需要展示前几句话即可。所以使用-webkit-box布局来实现。
html部分：

<div class="blog"> 
  <div class="article">
    文本显示为两行,超过部分隐藏并使用省略号
    修改 width 属性查看效果。
  </div>
</div>

css部分：

.blog{
  background-color: red;
  padding: 20px;
}
.article {
  background-color: green;
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  width:200px;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}

效果：

常用-webkit-box布局的属性：

• -webkit-box-orient：在父元素设置,子元素的排列方式
  值：vertical(垂直)/horizontal(水平)/inline-axis(默认值,横向排列,映射为 horizontal)/block-axis(沿着块轴来排列子元素,映射为 vertical)/inherit(从父元素继承 box-orient 属性的值)

• -webkit-line-clamp用来限制在一个块元素显示的文本的行数。必须结合display: -webkit-box; 和 -webkit-box-orient 属性使用。

其他用到的属性：

• overflow: hidden; （溢出隐藏）
• -text-overflow: ellipsis; （当对象内文本溢出时显示省略标记（…））