Mobile web-side css implements single-line and multi-line omitting of text, webcss

Mobile web-side css implements single-line and multi-line omitting of text, webcss

Single Row omitted:

Selector {text-overflow: ellipsis;/* This is the ellipsis (...) */overflow: hidden;/* Hide the settings beyond the limit */white-space: nowrap; /* set the continuous row */width: 200px;/* set the width */}

Multiple rows omitted:

Because most mobile browsers use the webkit kernel, 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. To achieve this effect, it needs to combine other WebKit attributes.

Display:-webkit-box; attributes that must be combined to display objects as auto scaling box models.

-Webkit-box-orient must combine attributes to set or retrieve the arrangement of sub-elements of a telescopic box object.

Selector {overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;/* There are two rows, set the number of rows */-webkit-box-orient: vertical;/* vertically arrange child elements */}

Note: If you want to add a detailed link after the ellipsis, add <a href = "#"> View Details </a> next to the text.