JS实现中英文混合文字溢出友好截取功能

以下是JS实现中英文混合文字溢出友好截取功能的完整攻略。

什么是中英文混合文字溢出？

中英文混合文字溢出通常是指，在一个容器中，两种不同字符（例如汉字和英文字符）混合排列，当容器宽度不够时，字符溢出容器的情况。由于汉字和英文字母的宽度不同，所以溢出部分难以准确的识别和截断，需要特殊处理。

如何实现中英文混合文字溢出友好截取？

第一步：计算字符长度和容器宽度

要实现中英文混合文字截取，首先需要计算字符的长度和容器的宽度。在JS中，字符长度可以通过字符串的length属性计算得出，容器的宽度则可以通过offsetWidth或者clientwidth属性获得。

const container = document.getElementById('container');
const text = 'Hello, 世界!';

const containerWidth = container.offsetWidth;
const textLength = text.length;

第二步：处理中英文混合文字

由于Chinese字符和ASCII字符的宽度不同，所以需要对字符串进行切割和处理。比较常见的方法是，使用正则表达式判断字符类型，并计算出每个字符的长度，累加得出整个字符串的长度。

function getLength(str) {
  let len = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 255) {
      len += 2;
    } else {
      len += 1;
    }
  }
  return len;
}

const text = 'Hello, 世界!';
const textLength = getLength(text);

第三步：截取字符串并添加省略号

在计算完文本的长度和容器的宽度后，就可以对文本进行截取处理，并添加省略号。比较常见的方法是，利用CSS的text-overflow和white-space属性实现。

const container = document.getElementById('container');
const text = 'Hello, 世界!';
const containerWidth = container.offsetWidth;
const textLength = getLength(text);
let result = text;
if (textLength > containerWidth) {
  let len = Math.floor(containerWidth / 7); //每个字符的平均长度为7
  result = text.substring(0, len) + '...';
}
container.innerHTML = result;

示例1：纯英文字母溢出截取

<div id="container" style="width: 200px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis"></div>

<script>
const container = document.getElementById('container');
const text = 'This is a long text string';
const containerWidth = container.offsetWidth;
let result = text;
if (text.length > containerWidth / 7) {
  let len = Math.floor(containerWidth / 7);
  result = text.substring(0, len) + '...';
}
container.innerHTML = result;
</script>

示例2：中英文混合文字溢出截取

<div id="container" style="width: 150px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis"></div>

<script>
function getLength(str) {
  let len = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 255) {
      len += 2;
    } else {
      len += 1;
    }
  }
  return len;
}

const container = document.getElementById('container');
const text = '这是一段很长的中文字符串，同时也包含了一些英文。';
const containerWidth = container.offsetWidth;
const textLength = getLength(text);
let result = text;
if (textLength > containerWidth) {
  let len = Math.floor(containerWidth / 14); //中文字符的平均长度为14
  result = text.substring(0, len) + '...';
}
container.innerHTML = result;
</script>

以上就是实现中英文混合文字溢出友好截取功能的完整攻略。