Home >Web Front-end >HTML Tutorial >Mobile web css realizes single line omission and multi-line omission of text_html/css_WEB-ITnose

Mobile web css realizes single line omission and multi-line omission of text_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 11:49:331275browse

Single-line omission:

selector{	text-overflow: ellipsis;/*这就是省略号喽*/		  	overflow: hidden;/*设置超过的隐藏*/	white-space: nowrap;/*设置不断行*/	width:200px;/*设置宽度*/}

Multiple-line omission:

Because most mobile browsers use the webkit kernel , so you can use the -webkit-line-clamp attribute.

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other WebKit properties.

display: -webkit-box; Attributes that must be combined to display the object as a flexible box model.

-webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.

selector{	overflow : hidden;	text-overflow: ellipsis;	display: -webkit-box;	-webkit-line-clamp: 2;/*此为两行,设置行数*/	-webkit-box-orient: vertical;/*子元素垂直排列*/}

Note: If you want to add a link to view details after the ellipsis, add .