如何在文本触发换行时自动移除分隔符·（•）

核心思路 #

• 将目标文本按•分割为前后两个独立部分
• 创建隐藏的复用测量元素，同步文本容器的字体样式后，分别计算前后两段文本、•+两侧空格的总渲染宽度
• 对比总渲染宽度和文本容器的可用宽度，判断是否会触发换行
• 如果总宽度超过容器可用宽度则移除•，否则保留原格式
• 监听容器尺寸变化、窗口缩放事件，实时重新计算更新文本内容

完整可运行代码 #

<textarea readonly cols="50" rows="5" class="auto-bull-textarea">big fat long line • longer line haha whoopsie</textarea>
<textarea readonly cols="20" rows="5" class="auto-bull-textarea">big fat long line • longer line haha whoopsie</textarea>

// 全局复用测量元素，避免重复创建DOM
const measureEl = document.createElement('span');
measureEl.style.position = 'absolute';
measureEl.style.visibility = 'hidden';
measureEl.style.whiteSpace = 'nowrap';
document.body.appendChild(measureEl);

function updateTextareaBull(textarea) {
  // 同步textarea字体样式，保证宽度计算准确性
  const textStyle = window.getComputedStyle(textarea);
  measureEl.style.font = textStyle.font;
  
  const originalText = textarea.defaultValue; // 存储原始文本避免丢失•符号
  const parts = originalText.split('•').map(p => p.trim());
  if (parts.length !== 2) return; // 不符合分割规则直接跳过处理
  
  // 计算各部分渲染宽度
  const [leftPart, rightPart] = parts;
  measureEl.textContent = leftPart;
  const leftWidth = measureEl.offsetWidth;
  measureEl.textContent = ' • ';
  const bullWidth = measureEl.offsetWidth;
  measureEl.textContent = rightPart;
  const rightWidth = measureEl.offsetWidth;
  const totalRenderWidth = leftWidth + bullWidth + rightWidth;
  
  // 计算textarea可用宽度，扣除内边距和滚动条宽度
  const availableWidth = textarea.clientWidth - 
    parseFloat(textStyle.paddingLeft) - 
    parseFloat(textStyle.paddingRight) - 
    (textarea.offsetWidth - textarea.clientWidth);
  
  // 根据判断结果更新文本
  if (totalRenderWidth > availableWidth) {
    // 不需要换行直接拼接文本可以写`${leftPart} ${rightPart}`
    textarea.value = `${leftPart}\n${rightPart}`;
  } else {
    textarea.value = originalText;
  }
}

// 初始化所有目标textarea
document.querySelectorAll('.auto-bull-textarea').forEach(el => {
  updateTextareaBull(el);
  // 监听textarea尺寸变化自动更新
  new ResizeObserver(() => updateTextareaBull(el)).observe(el);
});
// 监听窗口缩放全局更新
window.addEventListener('resize', () => {
  document.querySelectorAll('.auto-bull-textarea').forEach(updateTextareaBull);
});

注意事项 #

• 该逻辑可以无缝迁移到普通文本元素，仅需要将操作textarea.value改为操作元素textContent即可
• 如果需要处理多个•符号的场景，可以调整分割逻辑循环判断每一段的宽度即可

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