一串纯英文+符合的字符串，如何才能让字符串换行的同时，阻止英文单词的换行？

Question

如图

我希望达到的效果

CD01,
MW13,CD02

能够将 MW13 进行换行显示，不要中间断行！

以上截图的 codesandbox在线代码，可以在4-里面进行在线更改

非在线例子的纯代码

<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="wrap wrap-1">
          <!-- <span>cyd1-0110-01</span> -->
          <!-- <span>CD01,MW13,CD02</span> -->
          <span>中英文混合amcy 但是英文不换行</span>
        </div>
      </el-col>
      <el-col :span="12"> 1-默认css就是 </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="wrap wrap-2">
          <span>CD01,MW13,CD02</span>
        </div>
      </el-col>
      <el-col :span="12"> 2-纯英文默认不换行 </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="wrap wrap-3">
          <span>CD01,MW13,CD02</span>
        </div>
      </el-col>
      <el-col :span="12">
        <p>3-纯英文加上 overflow-wrap: break-word; 才触发换行</p>
        <p>但是这个会导致连续的单词字母也换行了</p>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="wrap wrap-4">
          <span>CD01,MW13,CD02</span>
        </div>
      </el-col>
      <el-col :span="12">
        <p>4-</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: function () {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss">
.wrap {
  border: 1px solid #000;
  margin-bottom: 10px;
  &-1 {
    width: 100px;
  }
  &-2 {
    width: 70px;
  }
  &-3 {
    width: 70px;
    overflow-wrap: break-word;
  }
  &-4 {
    width: 70px;
    word-wrap: break-word;
    word-break: keep-all;
  }
}
</style>

Answer 1

因为正儿八经的英文是用空格分割单词的：

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

👆逗号和句号后面是有空格的。

如果数据源就是这个样子的话，JS 预处理一下就行了：

<template>
<div class="content">
{{ 'CD01,MW13,1CD02'.replaceAll(/(,|\.)(\w)/g, '$1 $2') }}
</div>
</template>
<style>
.content{
  white-space: normal
}
</style>