css处理文本折行截断
包括单行文本折行和多行文本折行
#para { width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
规定行数的截断处理方式(多行)
#para { width: 400px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
完整代码如下:
<!DOCTYPE html> <html > <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" > <p > hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world! </p> </div> </body> </html>