效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font: 14px/22px "Microsoft Yahei"; } p{ width: 300px; margin: 50px auto; } /*多行文本超出...方案一:(适用于不确定文字有几行，如果超出多少行就进行...显示)*/ .test1{ -webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数*/ /*display: -webkit-box; /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/ display: -webkit-box; /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/ overflow: hidden; word-break: break-all; } /*多行文本超出...方案二:(适用于已知文字肯定显示不开)*/ .test2{ position: relative; line-height: 20px; max-height: 40px; /*max-height/height设置为line-height的整数倍,防止文字显示一半*/ overflow: hidden; } .test2::after{ content: "..."; position: absolute; right: 0; bottom: 0; padding-left: 20px; background: linear-gradient(to right,transparent,#fff 55%); } /*多行文本超出...方案三*/ .test3{ /*用JavaScript实现*/ } </style> <script> window.onload=function(){ var oTxt=document.getElementById("txt"); function sub(num){ oTxt.innerHTML=oTxt.innerHTML.substring(0,num); } sub(60); }; </script> </head> <body> <p class="test1">百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台，其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2014年11月收录词条数量已达1000万个。 百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</p> <p class="test2">百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台，其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2014年11月收录词条数量已达1000万个。 百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</p> <p class="test3"><span id="txt">百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台，其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2014年11月收录词条数量已达1000万个。 百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</span><span>...</span></p> </body> </html>