一句话同时存在中文和英文，设置其字间距

css中有两个样式用来设置字间距

1.letter-spacing

<div class="letter">word间距展示</div>

.letter {
      letter-spacing: 1em;
      background-color: #ff0;
    }

letter-spaing用来调整汉字的字间距，对于英文单词会将其按字母拆分，而后调整每个字母的间距；

2. word-spacing

<div class="word">word间距展示</div>

.word {
	word-spacing: 1em;
	background-color: '#f00';
}

word-spacing 用于设置单词之间的间距，对于汉字是无效的

3. 而当一句话中同时存在中文和英文怎么去设置间距呢
   首先当使用Vue的时候（即v-for渲染）

var vm = new Vue({
      el: '#app',
      data: {
        str: 'call这是测试test lala测试call测试test测试cec睡觉觉jhh水果店',
        newOptions: []
      },

      created() {
        this.newOptions =  this.format(this.str)
      },

      methods: {
        format(str) {
          const reg = /[a-zA-Z]+/g;
          let temp;
          let result = [];
          let index = 0;
          while ((temp = reg.exec(str)) != null) {
            str = str.slice(index);
            result = result.concat([
              {
                content: str.slice(0, temp['index'] - index),
                len: false,
              },
              {
                content: temp[0],
                len: true,
              }
            ]);
            index = temp['index'] + temp[0].length;
          }
          result.push({
            content: str.slice(index),
            len: false,
          });
          return result
        }
      }
    })

可以得到这样一个数组

通过正则我们将这串字符串拆分成了一个对象数组的形式，这样就能愉快的进行v-for渲染了

<div id="app">
    <div class="content">
      <span v-for="item in newOptions" :class="item.len? 'en':'cn'">{{ item.content }}</span>
    </div>
  </div>

最后在定义两种样式穿插其中

.content {
      font-size: 14px;
      background-color: #ff0;
    }
    .en {
      word-spacing: 1em;
      padding-right: 1em;
    }
    .cn {
      letter-spacing: 1em;
    }

结果就得到我们需要的结果了，如下图

中英文完美的展示，相同的字间距，还不会让其中的英文被拆分

当然即使不适用Vue利用这个方法也是很简单的

1. 同上方法将字符串拆分，只不过不需要拆成数组
2. 将拆到的每一项根据中英文不同拼上不同类名的html标签
3. 最后$.html(str) 完工

在实际生产中，最好还是做成图片直接利用图片渲染，我们的产品就是这样，一开始让我自己分解渲染，搞到最后，因为后面还有背景图，其实无论怎么调整css，最终都不可能完美契合每一张背景图，最终还是要ui上传处理好的图片
当然方法中还是有可以优化的地方，比如得到数组的第一项的content其实是空字符串，有兴趣的可以优化一下自己试着玩一玩