zoukankan      html  css  js  c++  java
  • 11、多行文本最后一行显示省略号并截取文本字数(vue)

    1.首先通过css实现多行文本显示省略号:

    {
        height: 45px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    发现最后一行会占满一行,不是想要的效果:

    为实现最后一行不占满,想到通过截取文本字数来实现:

    eg:
    data() {
        return {
          list: [
            {
              title: "标题1",
              content:
                "7月11日周三下午,融都众筹将分享我们打造开放型产品的思路,介绍我们所提供的API接口,的API接口,我们希望帮助融都我们希望帮助融都众筹的使用者们实现更多可能,也希望参与的朋友们可以一起探讨互动,我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议 介绍我们所提供的AP。",
              date: "2019-6-10"
            },
            {
              title: "标题2",
              content:
                "7月12日周四下午,融都众筹将分享我们打造开放型产品的思路,介绍我们所提供的API接口,我们希望帮助融都众筹的使用者们实现更多可能,也希望参与的朋友们可以一起探讨互动,我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议, 介绍我们所提供的API接口介绍我们。",
              date: "2019-6-10"
            },
            {
              title: "标题3",
              content:
                "7月13日周五下午,融都众筹将分享我们打造开放型产品的思路,介绍我们所提供的API接口,我们希望帮助融都众筹的使用者们实现更多可能,也希望参与的朋友们可以一起探讨互动,我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议, 介绍我们所提供的API接口,也希望参与的朋友们可以一起探讨互动,我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议, 介绍我们所提供的API接口。",
              date: "2019-6-10"
            }
          ],
          str: []
        };
      },
    mounted() {
        this.dy_cutstr(); //页面加载调用截取函数
      },
    methods:{
        // 截取字符串
        cutstr(str, len) {
          var str_length = 0;
          var str_len = 0;
          var str_cut = new String();
          var str_len = str.length;
          for (var i = 0; i < str_len; i++) {
            var a = str.charAt(i);
            str_length++;
            if (escape(a).length > 4) {
              //中文字符的长度经编码之后大于4
              str_length++;
            }
            str_cut = str_cut.concat(a);
            if (str_length >= len) {
              str_cut = str_cut.concat("...");
              return str_cut;
            }
          }
          //如果给定字符串小于指定长度,则返回源字符串;
          if (str_length < len) {
            return str;
          }
        },
       // 调用截取函数
        dy_cutstr() {
          let text = this.list.map((item, index) => {
            let content = this.cutstr(item.content, 200); //截取200个字数
            let title = item.title;
            let date = item.date;
            return { title, content, date }; //格式化:需要返回对象数组
          });
          this.str = text; //将格式化的数据赋值给自定义的str[] 
        }
    }
    
    //最后在模板中循环str数组

    最后实现效果如图:

    不存在一劳永逸的技术,唯有坚持不懈的努力.
  • 相关阅读:
    BZOJ3697: 采药人的路径
    解题:WC 2007 石头剪刀布
    解题:CQOI 2017 老C的方块
    解题:洛谷4314 CPU监控
    解题:CQOI 2017 老C的任务
    解题:CF1009 Dominant Indices
    解题:CF570D Tree Requests
    解题:APIO 2012 派遣
    解题:ZJOI 2015 幻想乡战略游戏
    解题:洛谷4178 Tree
  • 原文地址:https://www.cnblogs.com/xlfdqf/p/11096180.html
Copyright © 2011-2022 走看看