前端限制显示的文本字数的几种方法——不换行与换行

一，使用Vue限制文本字数长度的方式（不换行）

使用vue中的过滤器filter（使用本方式的特点:只是限制了文本的长度，但是有时候8个字母的长度与8个文字的长度会有一定的差距）

下面是相同长度的字母与文字的差距：
ijustlovedoit...
我喜欢编程你喜欢你什么呢...

 

<span class="icon">{{item.title | ellipsis}}</span>

定义过滤器：

export default {
  title: 'xx',
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 8) {
        return value.slice(0,8) + '...'
      }
      return value
    }
  }
}

　　二、使用Css限制文本字数长度的方式（不换行）

使用css中的选择器来限制文字的长度（使用本方式的特点:超出设置的宽度之后的文字会显示为...）

.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
}

　三、使用Css限制文本字数长度的方式（换行）

使用css中的选择器来限制文字的长度（使用本方式的特点:超出设置的宽度之后的文字会显示为...）

{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;(这里是行数 你可以控制你想在第几行末尾多余的显示省略号，之前的文本正常显示)
}