css,js文本长度变...省略号

css文本超出变…省略号

1. 单行文本

.ellipsis{
	width:200px;/*必须是固定宽度值*/
	overflow:hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/*超出部分显示省略号*/
    white-space:nowrap;/*规定段落中的文本不进行换行 */
}

2. 多行文本

.ellipsis-more{
	width:200px;/*必须是固定宽度值*/
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
	overflow:hidden;/*超出部分隐藏*/
}

js文本超出变…省略号

/**
 * 文本超长则...
 * @param str 需要处理的字符串
 * @param length 中文或中文符号占两个字符长度，英文或英文符号占一个字符长度
 * @returns {*}
 */
function ellipsisText(str, length) {
  let t = "";

  let len = calcStrLen(str);
  if (len > length) {
    t = `${getPartStr(str, length - 1)}...`;
  } else {
    return str;
  }

  return t;
}
//计算字符串长度
function calcStrLen(str) {
  let len = 0;
  if (!str || !str.length) return 0;

  for (let c in str) {
    if (isCn(str[c]) || isSymbol(str[c]) || ("A" <= c && "Z" >= c)) {
      len += 2;
    } else {
      len++;
    }
  }
  return len;
}
// 是否是中文
function isCn(c) {
  let is_cn = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
  return is_cn.test(c);
}
// 是否标点符号
function isSymbol(c) {
  let is_symbol = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;
  return is_symbol.test(c);
}
// 获取有效部分字符串
function getPartStr(str, len, right = false) {
  if (!str) return;
  let t = len;
  let s = str.split("");
  let result = "";
  while (t > 0 && s.length) {
    let c;
    if (right) {
      c = s.pop();
    } else {
      c = s.shift();
    }
    t -= calcStrLen(c);
    result += c;
  }
  return right
    ? result
      .split("")
      .reverse()
      .join("")
    : result;
}
//测试
console.log(ellipsisText('a手动阀手动阀手动阀手动阀士大夫顺丰速递', 6));
console.log(ellipsisText('a手动阀手动阀手动阀手动阀士大夫顺丰速递', 7));
console.log(ellipsisText('手动阀手动阀手动阀手动阀士大夫顺丰速递', 6));
console.log(ellipsisText('手动阀手动阀手动阀手动阀士大夫顺丰速递', 7));

测试结果：

（ps：欢迎交流，会及时回复的。觉得写的好的，关注下再走呗 +_+。）