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

最新推荐文章于 2024-08-26 15:06:44 发布

前端杨小白

最新推荐文章于 2024-08-26 15:06:44 发布

阅读量6k

点赞数 4

分类专栏： JavaScript 文章标签： Vue 字符串长度控制省略号显示

本文链接：https://blog.csdn.net/yangwqi/article/details/101543685

版权

JavaScript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

目的

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:"资讯的内容文字这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字",
}],