兼容多种浏览器的，多行文本多余显示省略号（···）的方法

最新推荐文章于 2023-09-28 18:50:13 发布

莉妞儿

最新推荐文章于 2023-09-28 18:50:13 发布

阅读量7.5k

点赞数 1

分类专栏： jquery 文章标签： jquery html 前端

本文链接：https://blog.csdn.net/han_li_li_best/article/details/77984637

版权

本文介绍了一种使用jQuery和HTML实现前端显示多行文本时，当内容超出限定行数时，多余部分以省略号表示，并提供【阅读全文】功能的方法。通过字符串截取和CSS样式来完成需求。

摘要由CSDN通过智能技术生成

最近做的一个页面中，显示一个景点的描述，数据是后台从数据库获取的，我这边要做的前端展示是，文案显三行，多余的文字显示省略号（···），文案的后边有然后【阅读全文】的字样，要实现的效果图，如下所示：

我是用 jquery字符串截取的方式来完成，具体实现方法如下：
html:

 <div class="main_cont">
  <span class="word_cont">随着人们生活水平的提高，越来越多的人选择出去旅游来度过自己的假期。     海南省三亚市是一座美丽的滨海城市，自然风光优美，气候宜人，是一个旅游度假的好地方，所以每年都会...   </span>
  <a href="" class="f14 c_3eb382 read_all">[阅读全文]</a>
   </div>
       <style>
          .word_cont
           }
             width:485px；
           {
           margin: 10px 0 15px;
           font-size: 14px;