包括单行文本折行和多行文本折行
#para {
400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
规定行数的截断处理方式(多行)
#para {
400px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #para{ width: 400px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } </style> </head> <body> <div class="wrap" style="background-color:#ff0;"> <p id="para"> hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world! </p> </div> </body> </html>