<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*文字溢出问题*/ .wordNowrap { width: 50%; height: 500px; margin: 0 auto; background: tan; } /*单行溢出···*/ .singleLine { width: 300px; height: 50px; background: teal; /*单行溢出···*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*多行溢出···*/ .moreLine { width: 00px; height: 60px; line-height: 30px; /*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/ background: paleturquoise; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .moreLine_box{ width: 360px; height: 60px; } /*多行后面···虚化*/ .moreLine_after { width: 360px; /*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/ height: 60px; line-height: 30px; overflow: hidden; position: relative; background: #fff; padding: 30px; } .moreLine_after::after { position: absolute; content: "..."; bottom: 0; right: 20px; background: linear-gradient(left, transparent, #eee 55%); background: -webkit-linear-gradient(left, transparent, #eee 55%); background: -moz-repeating-linear-gradient(left, transparent, #eee 55%); background: -moz-repeating-linear-gradient(left, transparent, #eee 55%); padding-left: 20px; } </style> </head> <body> <div class="wordNowrap"> <h2>文字溢出处理</h2> <p class="singleLine">单行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二</p> <p class="moreLine"> 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 </p> <div class="moreLine_box"> <p class="moreLine_after"> 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 </p> </div> </div> </body> </html>
