ellipsis 文字省略的两种方式 css 或 js

1.css方法 : 需要有width

// 单行的
width: 225px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

// 多行
display: -webkit-box;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; // 几行
-webkit-box-orient: vertical; // 方向

2. js方法

建立js文件my-filter.js

const isNullOrEmpty = function (val) {
  if (val === null || val === '' || typeof (val) === 'undefined') { return true } else { return false }
}

const ellipsis = function (value, num) {
  if (!value) return ''
  value = value.replace(new RegExp('</?[^/?(*)][^><]*>', 'g'), '')
  value = value.replace(/&nbsp;/g, ' ')
  value = value.replace(/ /g, ' ')
  num = isNullOrEmpty(num) ? 20 : num
  if (value.length > num) {
    if (num === -1) {
      return value
    }
    return value.slice(0, num) + '...'
  }
  return value
}


export {
    isNullOrEmpty,
    ellipsis
}

在main.js主入口文件中引入

import * as myFilter from '@/utils/my-filter'

Object.keys(myFilter).forEach(key => {
  Vue.filter(key, myFilter[key])
})

在.vue文件中应用

<span>{{ 需要省略的字段 | ellipsis(字数) }}</span>

<span>{{ item | ellipsis(60) }}</span>