JavaScript 根据中英文混合文本判断是否换行

在 JavaScript 中判断中英文混合文本是否换行（即是否超出指定宽度），可以通过以下几种方法实现：

1. 使用 Canvas 测量文本宽度（最准确）

function getTextWidth(text, fontStyle = '14px Arial') {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = fontStyle;
  return context.measureText(text).width;
}

function isTextWrapped(text, containerWidth, fontStyle) {
  return getTextWidth(text, fontStyle) > containerWidth;
}

// 使用示例
const text = "这是一段中英文混合的文本 Mixed Chinese and English text";
const containerWidth = 200; // 容器宽度(px)
const fontStyle = '14px Arial';

console.log(isTextWrapped(text, containerWidth, fontStyle));

2. 基于字符数的近似判断（适用于等宽字体）

function estimateLines(text, maxCharsPerLine) {
  // 中文字符算2个宽度单位，英文字符算1个
  let currentLineLength = 0;
  let lines = 1;
  
  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    const charWidth = /[\u4e00-\u9fa5]/.test(char) ? 2 : 1;
    
    if (currentLineLength + charWidth > maxCharsPerLine) {
      lines++;
      currentLineLength = charWidth;
    } else {
      currentLineLength += charWidth;
    }
  }
  
  return lines > 1;
}

// 使用示例
const text = "Hello世界，这是一段测试文本Test text";
console.log(estimateLines(text, 10)); // true (会换行)
console.log(estimateLines(text, 30)); // false (不会换行)

3. 结合 DOM 实际渲染检测

function checkTextWrapping(elementId) {
  const element = document.getElementById(elementId);
  if (!element) return false;
  
  // 创建一个不可见的克隆元素用于测量
  const clone = element.cloneNode(true);
  clone.style.visibility = 'hidden';
  clone.style.position = 'absolute';
  clone.style.whiteSpace = 'nowrap';
  document.body.appendChild(clone);
  
  const singleLineWidth = clone.offsetWidth;
  document.body.removeChild(clone);
  
  return element.offsetWidth < singleLineWidth;
}

// 使用示例
// HTML: <div id="test-text">混合文本Mixed text</div>
console.log(checkTextWrapping('test-text'));

4. 考虑大小写字母的影响

function isCaseAffectingWrap(text, containerWidth, fontStyle) {
  const lowerWidth = getTextWidth(text.toLowerCase(), fontStyle);
  const upperWidth = getTextWidth(text.toUpperCase(), fontStyle);
  const normalWidth = getTextWidth(text, fontStyle);
  
  return {
    lowerCaseFits: lowerWidth <= containerWidth,
    upperCaseFits: upperWidth <= containerWidth,
    normalCaseFits: normalWidth <= containerWidth,
    isWrapped: normalWidth > containerWidth,
    widthDifference: {
      lower: lowerWidth,
      upper: upperWidth,
      normal: normalWidth
    }
  };
}

// 使用示例
const result = isCaseAffectingWrap("Sample Text 示例文本", 150, '14px Arial');
console.log(result);

5. 实际应用：动态调整文本

function adjustTextForContainer(text, container, fontSize = 14) {
  const style = window.getComputedStyle(container);
  const fontFamily = style.fontFamily || 'Arial';
  const fontStyle = `${fontSize}px ${fontFamily}`;
  const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  const containerWidth = container.clientWidth - padding;
  
  let currentText = text;
  let isWrapped = getTextWidth(currentText, fontStyle) > containerWidth;
  
  return {
    originalText: text,
    isWrapped,
    suggestedFontSize: fontSize,
    fitsExactly: !isWrapped,
    // 如果换行，计算能容纳的最大字符数
    maxChars: isWrapped ? calculateMaxChars(text, containerWidth, fontStyle) : text.length
  };
}

function calculateMaxChars(text, maxWidth, fontStyle) {
  let width = 0;
  for (let i = 0; i < text.length; i++) {
    width += getTextWidth(text[i], fontStyle);
    if (width > maxWidth) return i;
  }
  return text.length;
}

注意事项

1. 字体影响：不同字体的字符宽度差异很大，特别是中文字体
2. 浏览器兼容性：Canvas 方法在所有现代浏览器中都可用
3. 性能考虑：频繁测量文本宽度会影响性能，应适当缓存结果
4. CSS 影响：letter-spacing、word-spacing 等 CSS 属性会影响实际宽度
5. 响应式设计：容器宽度变化时需要重新计算

对于最准确的结果，推荐使用 Canvas 测量方法，因为它能真实反映文本在指定字体下的渲染宽度。如果只是需要近似判断，基于字符数的估算方法性能更好。