如何实现H1元素中行尾带连字符单词的整词换行？

要实现「带连字符的单词如果出现在行尾，就整体移到下一行」的效果，不能像原代码那样给所有带连字符的单词加<br>，得精准检测行尾的目标单词。下面是可行的JS实现方案：

const h1Element = document.querySelector('.viewer__h1');
const originalText = h1Element.textContent;
h1Element.innerHTML = '';

const words = originalText.split(' ');
let currentLineWidth = 0;
const containerWidth = h1Element.clientWidth;

words.forEach((word, index) => {
  // 用临时span测量单词（含后续空格）的实际宽度
  const tempSpan = document.createElement('span');
  tempSpan.textContent = word + (index < words.length - 1 ? ' ' : '');
  h1Element.appendChild(tempSpan);
  
  const wordWidth = tempSpan.offsetWidth;

  // 只有当单词会超出容器宽度，且自身带连字符时，才强制换行
  if (currentLineWidth + wordWidth > containerWidth && word.includes('-')) {
    h1Element.removeChild(tempSpan);
    h1Element.innerHTML += `<br>${word} `;
    currentLineWidth = wordWidth;
  } else {
    currentLineWidth += wordWidth;
  }
});

// 清理末尾多余空格
h1Element.innerHTML = h1Element.innerHTML.trim();

逻辑说明 #

• 真实宽度测量：用临时<span>渲染单词，拿到实际的渲染宽度，避免字符数估算的误差（不同字体、字号下宽度差异大）。
• 行宽累加判断：每次添加单词前，计算当前行宽度+单词宽度是否超出容器，精准定位行尾单词。
• 精准处理：只针对行尾的带连字符单词添加换行，不会影响其他位置的同类型单词。

更简洁的CSS替代方案 #

如果不需要JS逻辑，用CSS就能直接禁用连字符断行：

.viewer__h1 {
  /* 禁止单词内任意断行，保持单词完整 */
  word-break: keep-all;
  /* 禁用浏览器自动连字符功能 */
  hyphens: none;
}

这个方案更轻量，适合大多数场景，优先推荐使用。

内容的提问来源于stack exchange，提问作者user10139010