乐趣区

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

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

计划一、单行省略

 <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 可能循环较慢,)


退出移动版