JavaScript中，判断文本是否被省略（ellipsis）通常需要检查元素的实际内容是否超出了其可见范围。这通常涉及到比较元素的实际内容宽度与其容器的可视宽度。有时候我们需要自定义去实现文字截断时的效果，这个时候就需要去动态判断文字是否发生的截断。

一、使用元素的滚动宽度和客户端宽度

当文本内容超出容器的宽度时，元素的scrollWidth会大于clientWidth。可以利用这一点来判断文本是否被省略。

function isTextEllipsed(element) {
  return element.scrollWidth > element.clientWidth;
}

// 使用示例
const element = document.querySelector('.your-text-element');
if (isTextEllipsed(element)) {
  console.log('Text is ellipsed');
} else {
  console.log('Text is not ellipsed');
}

说明

• scrollWidth：元素内容的总宽度，包括不可见的部分。
• clientWidth：元素的可见内容宽度，包括内边距，但不包括边框和滚动条。

这种方法适用于大多数情况下的单行文本省略判断。如果你需要处理多行文本，可能需要更复杂的计算，或者使用其他方法来测量文本的可见性。

二、使用 getComputedStyle

通过获取元素的样式信息，可以间接判断文本是否被省略。

function isTextEllipsed(element) {
  const style = window.getComputedStyle(element);
  return (
    style.overflow === 'hidden' &&
    style.whiteSpace === 'nowrap' &&
    style.textOverflow === 'ellipsis' &&
    element.scrollWidth > element.clientWidth
  );
}

// 使用示例
const element = document.querySelector('.your-text-element');
if (isTextEllipsed(element)) {
  console.log('Text is ellipsed');
} else {
  console.log('Text is not ellipsed');
}

三、使用 Range 对象测量文本宽度

通过 Range 对象，可以精确测量元素中的文本宽度。这种方法在需要高精度判断时非常有用。

function isTextEllipsed(element) {
  const range = document.createRange();
  range.selectNodeContents(element);
  const rect = range.getBoundingClientRect();
  return rect.width > element.clientWidth;
}

// 使用示例
const element = document.querySelector('.your-text-element');
if (isTextEllipsed(element)) {
  console.log('Text is ellipsed');
} else {
  console.log('Text is not ellipsed');
}

四、使用 Canvas 测量文本宽度

对于非常精确的测量，尤其是在处理自定义字体或复杂样式时，可以使用 Canvas 来测量文本宽度。

function measureTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = font;
  return context.measureText(text).width;
}

function isTextEllipsed(element) {
  const style = window.getComputedStyle(element);
  const font = style.font;
  const textWidth = measureTextWidth(element.textContent, font);
  return textWidth > element.clientWidth;
}

// 使用示例
const element = document.querySelector('.your-text-element');
if (isTextEllipsed(element)) {
  console.log('Text is ellipsed');
} else {
  console.log('Text is not ellipsed');
}

五、总结

这些方法各有优缺点，选择哪种方法取决于具体的需求和环境：

• scrollWidth vs clientWidth 是最简单和直接的方法，适用于大多数情况。
• Range 对象 提供了更精确的测量，适合需要精确判断的场合。
• Canvas 方法适合处理复杂的字体和样式，虽然实现起来稍微复杂一些。

根据你的具体需求和环境，选择最合适的方法来判断文本是否被省略。

版权所有

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)