Single-line text overflow ellipsis
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 100px; background: rgb(211, 128, 128); /*Set the text display can not wrap on one line * / White-Space: nowrap; / * exceeding a defined width hidden content * / overflow: hidden; / * display ellipsis when the text overflows represents trimmed text * / TEXT- overflow : ellipsis; } </ style> </ head> <body> <div class = " Box " > la la la la la la la la la pull ah </ div> </ body> </ html>
Multi-line text display overflow ellipsis
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 100px; font-size: 16px; line-height: 32px; /*If the height is set to the multiple rows of the entire high * / ; 96PX: height RGB (: background 218 , 182 , 182 ;) / * number of lines of text in a block element displayed * / -webkit-Line-CLAMP : 3; / * must be combined with the properties of the object as an elastic stretch box model display * / the display: -webkit-box; / * must be combined with the properties set or arrangement of sub-element telescopic cartridge retrieval object. * / -Webkit-Box-Orient: Vertical; / * exceeding a defined height hidden content * / overflow: hidden; / * display when the text overflows ellipsis represented pruned text * / TEXT- overflow: ellipsis; } </ style> </ head> <body> <divclass = " Box " > La La La La La La La La la la la la pull ah </ div> </ body> </ HTML>
