关于javascript:前端实现文本多行省略方案

7次阅读

共计 3331 个字符，预计需要花费 9 分钟才能阅读完成。

计划一、单行省略

 <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 可能循环较慢，）

正文完