【CSS】文本超出显示省略号（单行、多行）

文字超出一行显示省略号

css3文本属性white-space、text-overflow

CSS 属性名	含义	值
white-space	设置文本显示格式	normal: 默认值。 pre：原格式显示。 pre-wrap：在pre基础上增加自动换行。 pre-line：在normal基础上识别换行。 nowrap：强制一行显示。
text-overflow	设置文本溢出方式	clip：默认值。 ellipsis：省略号。
overflow	设置溢出内容显示方式	visible：显示，默认值。 hidden：隐藏。 scroll：显示滚动条。 auto：如果溢出显示滚动条

{ 
    white-space: nowrap;	
    text-overflow: ellipsis;
    overflow: hidden;
}

文字超出多行显示省略号

display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ；

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数，这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；

-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ；

{ 
    width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    /*弹性盒模型*/
    display: -webkit-box;
    /*上下垂直*/
  	-webkit-box-orient: vertical;
    /*当属性值为3，表示超出3行隐藏。限制在一个块元素显示的文本的行数，需要和上面两个属性结合*/
  	-webkit-line-clamp: 3;
}