阅读 542

前端多行文本超出省略(兼容所有浏览器)

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

###方案一、单行省略

这个最简单,css直接实现

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

效果:

image.png

###方案二、多行省略,谷歌方案,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>
复制代码

效果:

image.png

###方案三、多行省略利用css中的after实现

这里背景色因为我示例代码父元素用的pink,所以要跟父元素一致,这个方案,结尾处总感觉有些不太合适,不介意UI效果可以凑合着用

 <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>
复制代码

效果:

image.png

###方案四、JS实现

方法传入两个参数,1:需要做省略的dom的行高,2:行数。3:dom元素。 通过递归的方式来获取到需要的行数的所有文案,将最后替换为...,生成新的html文本,来替换原来的html文本
参数1,2可以合并,直接算出需要的行数的高度,还能省一步计算高度(var t = h*n)。

 <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>
复制代码

效果:

image.png


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


文章分类
前端
文章标签