文字溢出尾部显示省略号

单行文本溢出

• 盒子的宽度设置为固定宽度100px；
• white-space设置为nowrap，文字不可换行
• overflow设置为hidden，内容将被剪裁以适合填充框。 不提供滚动条。
• text-overflow设置为ellipsis，用省略号来表示被截断的文本，这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。

.single-line{
    width:100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

多行文本溢出

• display为-webkit-box时，父元素内子元素默认转换为inline-block行内块元素；
• -webkit-box-orient:vertical垂直布局内容；
• -webkit-line-clamp:3设置内容为3行；
• overflow设置为hidden，内容将被剪裁以适合填充框。 不提供滚动条。

.multi-line{   
    width: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;//
    overflow: hidden;
}