前端限制顯示的文本字數的幾種方法——不換行與換行

一，使用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;(這里是行數 你可以控制你想在第幾行末尾多余的顯示省略號，之前的文本正常顯示)
}