前端实现文本多行省略方案

以下示例文案摘取自武侠小说英雄志

方案一、单行省略

 <p>这个最简单，css直接实现</p>
   <style>
        .text1 {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
   </style>
   
      <p class="text1">
          <b>杨肃观</b>我建超世志，必至无上道。五辅大学士杨远之子，外号「风流司郎中」，少时代父出家，少林天绝僧关门弟子，十八岁赴京赶考，官拜兵部职方司郎中，乃是柳昂天手下两大将之一。外貌俊美，多智善谋，再加文武全才，是各朝各代中的政治菁英典范。天绝唯一弟子，天生战略家，客栈大掌柜，大佛国创始人，也是真正的枭雄之辈。正统朝创建者之一。英雄志中最让人看不透的一个人。实际是正统朝真正的主人。以一人之身，承托整个正统朝。他不是卢云，不会纠结于什么才是对错之分的公理正道；他不是秦仲海，不会一怒揭竿而起、牵动千万黎民之恨后转身遁逃；他不是伍定远，不会困惑于苍生和个人恩怨而茫然无措；他是杨肃观，一个灭世又济世的掌控者；敢于把理想付诸实际的实干家，倩兮口中的真正英雄。顾嗣源死后，与顾倩兮成亲。与怒苍交战难解难分。习成其师天绝神僧毕生摸索完善的少林传说阵法——天决，在少林与怒苍第三战中手持神剑擒龙，用六道轮回先后打败宁不凡的仁剑和秦仲海，正统朝秘密机构“客栈”创始人。客栈的宗旨：围堵勇剑、守护魔刀、遮蔽圣光。“罪”与“罚”，愿天地罪孽尽加于吾身的情怀，谁能懂？
        </p>

效果：

方案二、多行省略，谷歌方案，css实现，（谷歌浏览器或者移动端有效）
<style>
.text2 {

  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

</style>

<p class="text2">
  <b>秦仲海</b>他日若遂凌云志，敢笑黄巢不丈夫。为征西大都督武德侯、前怒苍山主秦霸先之子，九州剑王方子敬之徒，柳昂天手下头牌猛将，与杨肃观并称“文杨武秦”，另有外号「火贪一刀」。正所谓“侵掠如火，嗜血如贪，杀人何须第二刀”。秦仲海状似粗豪，其实为人精细，尤擅权谋，英雄志中命运变化最为巨大的一人。性格诙谐，行事往往出人意表，死也不怕的铁汉。天生反骨，不屈从于任何压迫，敢于对皇权拔刀相向，是历史各朝代中挑战绝对权威的典范。他长年戍守北疆，生得是高鼻鹰目，虎背熊腰，生平最爱逛酒家。后被刘敬告知身世，打入狱中后左腿被施刖刑，脸刺“罪”，琵琶骨被穿，武功被废。被卢云救出后，与言二娘的客栈中谋生。后攀爬珠穆朗玛峰而使得阴阳筋脉畅通，武功直追业师。此后重建怒苍山并扯起反旗，引动八方好汉齐聚怒苍对抗朝廷。他在少林密道和宁不凡对阵杨肃观，练成烈火焚城。秦仲海率领怒苍反军为天下饥民之表率，不断冲击朝廷防线，多次与伍定远交锋，并亲赴帝都与杨肃观对决。面对越强势的敌人，反而能越战越勇，曾以一人之力倒拖800军士。昔年火贪刀，攻守不必第二刀；今朝秦仲海，杀人何须再用刀？
</p>

效果：

方案三、多行省略利用css中的after实现
<p>这里背景色因为我示例代码父元素用的pink，所以要跟父元素一致，这个方案，结尾处总感觉有些不太合适，不介意UI效果可以凑合着用</p>
<style>
.text3 {

  position: relative;
  width: 100%;
  line-height: 20px;
  max-height: 60px;
  overflow: hidden;
}

.text3::after {
  content: "...";
  background-color: pink;
  height: 20px;
  font-size: 14px;
  color: #000;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 20px;
  background: -webkit-linear-gradient(to right, transparent, pink 20px);
  background: -o-linear-gradient(to right, transparent, pink 20px);
  background: -moz-linear-gradient(to right, transparent, pink 20px);
  background: linear-gradient(to right, transparent, pink 20px);
}

</style>

<p class="text3">
  <b>卢云</b>为天地立心，为生民立命，为往圣继绝学，为万世开太平。一代儒侠，科举落榜，又不幸被官府污蔑，狱中识得常雪恨，逃狱后在扬州遇到陆孤瞻，学到无双连拳。在顾家为家丁时与顾家小姐暗生情愫。西域和番，有一人面对十万大军、当阳怒吼的万丈豪情；金榜题名，有打开天眼看文章的飞扬文采；正统复辟，有独自一人行走人世间的默默忍泪。有知识分子的那种正义和迂腐，又不乏才华和毅力，没有枭雄般的决断和大局观，但是他对人性的善的追求矢志不渝，是一个完美的不完美形象。人生的大起大落中，他的执著造就了他对于正道的永恒追求，为人可以不像他那样思考，但得像他那样去做。守住心中的正道，至始至终都不曾违背。柳昂天家被抄后，带阿秀逃亡，途中练成“剑芒”神技。后跌入白水大瀑布里面的石洞，在石洞中悟出正十七，十年大自然的洗礼打磨，练就了旷古烁今的不世内力，成为新一代“剑神”。后被琼芳带出，被誉为最后的圣光。
</p>

效果：

方案四、JS实现
<p>

  方法传入两个参数，1：需要做省略的dom的行高，2：行数。3：dom元素。 通过递归的方式来获取到需要的行数的所有文案，将最后替换为...，生成新的html文本，来替换原来的html文本 <br>

参数1,2可以合并，直接算出需要的行数的高度,还能省一步计算高度（var t = h*n）。
<p>
<style>
.text4 {

  width: 100%;
  overflow: hidden;
  line-height: 20px;
}

</style>

<p class="text4">
  <b>伍定远</b>神胎宝血符天录，一代真龙海中生。本是西凉名捕，因调查一宗大命案，与官府反目成仇，被剑神卓凌昭的昆仑派从西凉追杀到北京，因缘际会的识得了卢云。他有市侩的一面，明白世道的险恶，人心不古。但面对名利，仕途的诱惑。他却一直奉行自己的一个准则，一个捕快的准则“杀人者死，天经地义”。只要自己一息尚存，便不允许世间有人斗胆灭人满门。后辗转千里，在神机洞中历经种种磨难，在生死存亡见始终不忘大义，反而得到真龙之体后，武功一日千里，成为与宁不凡，秦仲海等绝世强者并列的武学宗师。其为人虽然周到世故，但是始终坚持心中微妙的正义，是饱受时代洪流与命运考验的官场典范。痴恋艳婷，后终娶之，并育有一女。正统朝的始建者之一，正统朝龙手大都督，是正统朝抵抗怒苍反潮的中流砥柱，多次与秦仲海交锋。披罗紫气，龙神聚光掌，一身天山武学已练入巅峰极致。伍定远的悲剧，在于他不论是作为一介微末的巡捕，还是权倾天下的当朝第一武将，其小农本分的思想观念从未改变，因此在与艳婷的恩怨纠缠中苦闷压抑，被杨肃观牢牢算计，正如迦楼罗之于真龙。
</p>
<script>
      setItems(20,3, $(".text4"));
      function setEllipsis(h,n,e) {
        var text = e[0].innerHTML;
        var t = h*n
        if (e.height() > t) {
            e[0].innerHTML = text.substring(0, text.length - 4) + "...";
            setEllipsis(h,n,e)     
        }else{
          return
        }
      }
      function setItems(h,n,e) {
        for (var i = 0; i < e.length; i++) {
          setEllipsis(h,n,$(e[i]));
        }
      }
</script>

效果：

---

最后一种方案一般情况下都能实现效果，但是当有大量数据（例如接口返回大量列表数据，同时都需要做省略号处理时，JS可能循环较慢，）

---