Css单行文字超出_Css多行文字超出
一、Css 单行文字超出
/*单行超出隐藏，高度由字体大小决定+默认行高，不同系统默认字体不同*/ .line1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
二、Css 单行文字超出+行高设置（推荐）
/*单行超出隐藏，块高度有行高决定*/ .line2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 30px; }
三、Css 多行文字超出
/*多行超出隐藏,高度自适应*/ .line3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
四、Css 多行文字超出+行高设置 （推荐）
/*多行超出隐藏,高度固定，高度=line-height*n */ .line4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 20px; height: 60px; }
更多案例：
Demo 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .line { border: 1px solid red; margin: 30px; } /*单行超出隐藏，高度由字体大小决定+默认行高，不同系统默认字体不同*/ .line1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*单行超出隐藏，块高度有行高决定*/ .line2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 30px; } /*多行超出隐藏,高度自适应*/ .line3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /*多行超出隐藏,高度固定，高度=line-height*n */ .line4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 20px; height: 60px; } </style> </head> <body> <div class="line line1"> 千乐微云是济南小程序开发，小程序定制，小程序制作，微信小程序开发的优秀技术团队。提供专业搭建微信小程序，百度小程序，字节小程序，支付宝小程序等多平台的济南小程序开发公司 </div> <div class="line line2"> 千乐微云是济南小程序开发，小程序定制，小程序制作，微信小程序开发的优秀技术团队。提供专业搭建微信小程序，百度小程序，字节小程序，支付宝小程序等多平台的济南小程序开发公司 </div> <hr> <div class="line line3"> 千乐微云是济南小程序开发，小程序定制，小程序制作，微信小程序开发的优秀技术团队。提供专业搭建微信小程序，百度小程序，字节小程序，支付宝小程序等多平台的济南小程序开发公司 </div> <div class="line line3"> 千乐微云是济南小程序开发，小程序定制，小程序制作，微信小程序开发的优秀技术团队。 </div> <hr> <div class="line line4"> 千乐微云是济南小程序开发，小程序定制，小程序制作，微信小程序开发的优秀技术团队。提供专业搭建微信小程序，百度小程序，字节小程序，支付宝小程序等多平台的济南小程序开发公司 </div> <div class="line line4"> 千乐微云是济南小程序开发，小程序定制，小程序制作，微信小程序开发的优秀技术团队。 </div> </body> </html>
更多：
