如何实现类似.byCharWrapping的按逗号为分隔符的文本换行功能

该需求本质是基于容器宽度的按分隔符智能截断+换行控制，核心逻辑是先将原始文本按指定分隔符（你场景中为顿号）拆分为独立标签项，再逐个校验拼接后文本的宽度是否超出容器阈值，超出则停止拼接，以下是不同技术栈的落地代码：

前端Web实现 #

1. 拆分原始文本为标签数组 #

const rawText = '"soccer"、"basketball"、"hockey"、"volleyball"';
const tagList = rawText.split('、').filter(item => item.trim());

2. 动态测量宽度做截断 #

创建和实际标签样式完全一致的隐藏临时节点，保证宽度计算无误差：

function getValidTags(tagList, containerDom) {
  const containerWidth = containerDom.offsetWidth;
  // 初始化测量节点
  const measureEl = document.createElement('span');
  measureEl.style.cssText = `
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    font: ${getComputedStyle(containerDom).font};
    padding: ${getComputedStyle(containerDom).padding};
  `;
  document.body.appendChild(measureEl);

  const validTags = [];
  for (const tag of tagList) {
    const testStr = validTags.length ? `${validTags.join('、')}、${tag}` : tag;
    measureEl.textContent = testStr;
    if (measureEl.offsetWidth > containerWidth) break;
    validTags.push(tag);
  }
  document.body.removeChild(measureEl);
  return validTags.join('、');
}

// 调用示例，yourTagDom替换为实际的标签容器节点
yourTagDom.textContent = getValidTags(tagList, yourTagDom);

3. 按分隔符位置换行的CSS配置 #

避免单个标签被拆分成两半，仅在顿号/逗号位置换行：

.tag-container {
  word-break: keep-all;
  white-space: pre-wrap;
}

Swift/iOS实现（适配你提到的.byCharWrapping场景） #

如果是SwiftUI环境，直接使用以下逻辑实现：

let tagList = ["\"soccer\"", "\"basketball\"", "\"hockey\"", "\"volleyball\""]
@State private var displayTags: [String] = []
let tagFont = UIFont.systemFont(ofSize: 14) // 替换为实际使用的字体
let separatorWidth = "、".size(withAttributes: [.font: tagFont]).width

GeometryReader { containerGeo in
  Text(displayTags.joined(separator: "、"))
    .font(Font(tagFont))
    .background(GeometryReader { textGeo in
      Color.clear.onAppear {
        var tempTags: [String] = []
        var totalWidth: CGFloat = 0
        for tag in tagList {
          let tagWidth = tag.size(withAttributes: [.font: tagFont]).width
          let addWidth = tempTags.isEmpty ? tagWidth : (tagWidth + separatorWidth)
          if totalWidth + addWidth > containerGeo.size.width { break }
          tempTags.append(tag)
          totalWidth += addWidth
        }
        displayTags = tempTags
      }
    })
}

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