Everyone knows how to center a single line of text horizontally and vertically, but how about multiple lines of text?
Plus an ellipsis beyond the text display.
Single line
<! -- Single line text --> <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style> #div1 {width: 300px; height: 300px; background: red; text-align: center; line-height: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <div > <body> <div id="div1">Copy the code
Multi-line text
* This is done using the most common Flex layout. If you want to implement beyond ellipsis, you need to use JS.
<! -- Multiple lines of text --> <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style> #div1 {width: 300px; height: 300px; background: red; display: flex; flex-direction: column; justify-content: center; align-items: center; } </style> </head> <body> <div id="div1"> </div> </div> </body> </ HTML >Copy the code