解决多行标题，末行宽度不够时显示省略

在开发网站时多会遇到定义标题时，出现文字溢出现象，如是单行文字，则可以直接用css3的属性进行解决，使其超出宽度部分已省略号代替如：

“width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis”即可；

但如果入到行文本，末行溢出时，往往需要借助插件，实现省略号代替溢出文字，如电商网站的商品标题等；在这里利用-webkit-box，及-webkit-line-clamp和-webkit-box-orient属性即可实现（注意，后两个属性为-webkit的私有属性，不尽兼容其他浏览器），实现方式如下：

.title{
    height: 30px;
    display: -webkit-box;
    line-height: 15px;
    white-space: normal;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

<div class="title">
这是标题这是标题这是标题这是标题这是标题这是标题这是标题
</div>

-webkit-line-clamp、 -webkit-box-orient两个属性定义div从第几行开始超出部分已省略号代替