CSS實現多行文字溢位顯示省略號
阿新 • • 發佈：2019-02-17
單行文字溢位顯示省略號，可以直接使用
text-overflow:ellipsis; white-space:nowrap;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} </style> </head> <body> <div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </div> </body> </html>
多行文字溢位顯示省略號
方案一 使用webkit屬性-webkit-line-clamp（注意這是一個不規範的屬性）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} </style> </head> <body> <div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </div> </body> </html>
方案二 通過::after偽類新增省略號（相容性較好）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; position: relative;} div::after{content: '...'; position: absolute; right: 0; bottom: 0; background-color: #FFF;} </style> </head> <body> <div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </div> </body> </html>
另外，也可以通過一些JS的方式解決，這裡不做闡述