Eleven, multi-line text displays the last line of text words and intercepts ellipsis (VUE)

1. First css achieved through a multi-line text display with an ellipsis:

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

Found last line occupies the line, not the desired effect:

To achieve the last line is not filled, it expects to achieve by intercepting text Word Count:

eg:
data() {
    return {
      list: [
        {
          title: " Heading 1 " ,
          content:
            " July 11 Wednesday afternoon and into all crowdfunding will share our ideas to create an open product introduction we provide API interface, API interface, we want to help melt all we want to help melt all users who crowdfunding more likely to achieve, but also wish to participate can discuss with friends interact, we want to help users who are financing the crowdfunding achieve shared valuable advice on all financial crowdfunding AP introduction we provide. " ,
          date: "2019-6-10"
        },
        {
          title: " Heading 2 " ,
          content:
            " July 12 Thursday afternoon and into all crowdfunding will share our ideas to create an open product, introduce API interface we provide, we hope to help users who are financing the crowdfunding does more, I hope to participate friends can discuss with interactive, we want to help users who are financing the crowdfunding achieve shared valuable advice on all financial crowdfunding introduce our API interface provided to introduce our. " ,
          date: "2019-6-10"
        },
        {
          title: " Title 3 " ,
          content:
            " July 13 Friday afternoon and into all crowdfunding will share our ideas to create an open product, introduce API interface we provide, we hope to help users who are financing the crowdfunding does more, I hope to participate friends can discuss with interactive, we want to help users who are financing the crowdfunding achieve shared valuable advice on all financial crowdfunding, introduces API interface we provide, but also want to participate in interactive friends can explore together, we I hope that helps users who are financing the crowdfunding achieve shared valuable advice on all financial crowdfunding, introduces API interface we provide. " ,
          date: "2019-6-10"
        }
      ],
      str: []
    };
  },
mounted() {
    the this .dy_cutstr (); // page loading function call intercepted 
  },
methods:{
    // 截取字符串
    cutstr (str, len) {
       were str_length = 0 ;
      was str_len = 0 ;
      was str_cut = new String ();
      was str_len = str.length;
      for ( were i = 0 ; i <str_len; i ++ ) {
         were a = str.charAt (i);
        str_length ++ ;
         IF (Escape (A) .length> . 4 ) {
           // after the length is greater than the encoded Chinese characters. 4 
          str_length ++ ;
        }
        str_cut = str_cut.concat(a);
        if (str_length >= len) {
          str_cut = str_cut.concat("...");
          return str_cut;
        }
      }
      // if the given string is less than the specified length, then return to the source string; 
      IF (str_length < len) {
         return STR;
      }
    },
   // call the clipping function 
    dy_cutstr () {
      let text = this.list.map((item, index) => {
        Content the let = the this .cutstr (item.content, 200 is ); // taken 200 words 
        the let title = item.title;
        DATE the let = item.date;
         return {title, Content, DATE}; // Format: Returns the array of objects needed 
      });
       the this .str = text; // assign formatted data to a custom str [] 
    }
}

// The last loop in the template array str

Finally, to achieve results shown in Figure:

Guess you like

Origin www.cnblogs.com/xlfdqf/p/11096180.html