When the JS text exceeds the part, an ellipsis is used to replace the entire content when the mouse hovers

The part of the text that exceeds the text is replaced by an ellipsis

1. Single line

<div style='width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;'>内容</div> 

• width: width; (specify the width of each line)
• overflow: hidden (the overflow part is hidden)
• white-space: nowrap; (display all text in the same line, prohibit newline)
• text-overflow:ellipsis; (replace overflow text with ellipsis)

2. Multiple lines

<div style='display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical;'>内容</div> 

• display: -webkit-box; (CSS3 new feature, fluid layout can adapt to width)
• overflow: hidden (the overflow part is hidden)
• -webkit-line-clamp: number of lines; (CSS3 new feature, limit the content in the block container to the specified number of lines, and display ellipsis for the extra part)
• -webkit-box-orient: vertical; (specify the arrangement of all sub-elements of div, vertical means vertical arrangement)

Show full content on mouseover

Use the title attribute of the div element

<div 
	title='内容'
	style='display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical;'
>内容</div>