目的

vue根据字符串长度控制显示的字数超出显示省略号…

H5代码块

<a-col class="gutter-row" :span="12">
  <div class="infor" v-for="(item,key) in infor" :key=key>
    <div class="date" >
      <span style="font-size:28px;">{{item.year}}</span><br>
      <span style="font-size:22px;">{{item.date}}</span>             
    </div>
    <h3>{{item.title}}</h3>
    <span>{{item.content}}</span>
  </div>                            
</a-col>

CSS代码块

.infor{
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-top: 5px;
}
.date{
  float: left;
  width: 70px;
  text-align: center;
  font-weight: 600;
  line-height: 30px;
  padding: 3px 0;
}

JS代码块

mounted(){
  for(var i=0;i<this.infor.length;i++){//平台资讯显示长度截取
    if(this.infor[i].content.length>50){
      this.infor[i].content=this.infor[i].content.slice(0,50)+"..."
    }
  }
}

数据

infor:[{
    year:"2019",
    date:"01/23",
    title:"资讯的标题内容文字",
    content:"资讯的内容文字这是一条资讯的内容文字这是一条长很长很长很长很长很长很长很长很长的文字",
  },{
    year:"2019",
    date:"02/23",
    title:"资讯的标题内容文字",
    content:"资讯的内容文字这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字很长很长很长的文字",
  },{
    year:"2019",
    date:"03/23",
    title:"资讯的标题内容文字",
    content:"资讯的内容文字这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字",
  },{
    year:"2019",
    date:"04/23",
    title:"资讯的标题内容文字",
    content:"资讯的内容文字这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字",
  },{
    year:"2019",
    date:"05/23",
    title:"资讯的标题内容文字",
    content:"资讯的内容文字这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字",
}],

效果展示