@utilslib/web/isTextOverflowingWidth

---

检测单行文字是否超出容器宽度

---

isTextOverflowingWidth

函数签名

function isTextOverflowingWidth(element: HTMLElement): boolean

描述

检测单行文字是否超出容器宽度

参数

参数名	类型	可选	默认值	描述
element	HTMLElement	否	-	-

返回值

boolean

点击查看源码

js

/**
 * 检测单行文字是否超出容器宽度
 * @param element - 要检测的元素
 * @returns 文字是否超出容器宽度
 */
export function isTextOverflowingWidth(element) {
  if (!element) return false;
  // 创建临时span来测量文字实际宽度
  const span = document.createElement("span");
  span.style.position = "absolute";
  span.style.visibility = "hidden";
  span.style.whiteSpace = "nowrap";
  span.textContent = element.textContent || element.innerText;
  // 继承原元素的字体相关样式
  const style = getComputedStyle(element);
  span.style.fontSize = style.fontSize;
  span.style.fontFamily = style.fontFamily;
  span.style.fontWeight = style.fontWeight;
  span.style.letterSpacing = style.letterSpacing;
  span.style.textTransform = style.textTransform;
  document.body.appendChild(span);
  const textWidth = span.offsetWidth;
  span.remove();
  // 获取容器的可用宽度（减去padding）
  const paddingLeft = parseFloat(style.paddingLeft);
  const paddingRight = parseFloat(style.paddingRight);
  const availableWidth = element.clientWidth - paddingLeft - paddingRight;
  return textWidth > availableWidth;
}

ts

/**
 * 检测单行文字是否超出容器宽度
 * @param element - 要检测的元素
 * @returns 文字是否超出容器宽度
 */
export function isTextOverflowingWidth(element: HTMLElement): boolean {
  if (!element) return false;

  // 创建临时span来测量文字实际宽度
  const span = document.createElement("span");
  span.style.position = "absolute";
  span.style.visibility = "hidden";
  span.style.whiteSpace = "nowrap";
  span.textContent = element.textContent || element.innerText;

  // 继承原元素的字体相关样式
  const style = getComputedStyle(element);
  span.style.fontSize = style.fontSize;
  span.style.fontFamily = style.fontFamily;
  span.style.fontWeight = style.fontWeight;
  span.style.letterSpacing = style.letterSpacing;
  span.style.textTransform = style.textTransform;

  document.body.appendChild(span);
  const textWidth = span.offsetWidth;
  span.remove();

  // 获取容器的可用宽度（减去padding）
  const paddingLeft = parseFloat(style.paddingLeft);
  const paddingRight = parseFloat(style.paddingRight);
  const availableWidth = element.clientWidth - paddingLeft - paddingRight;

  return textWidth > availableWidth;
}

如有错误，请提交issue :::