中文页面段落排版

中文页面段落，不局限于只是纯中文字符内容，依然有“掺杂”英文字符或阿拉伯数字字符的情况。

满行字符两端对齐，内容均匀分布

满行字符两端对齐，指的是：

假设一行的宽度为 100px，单个字符宽度都为 15px，这时有字符 10 个，那么就会因为字符内容过长而一行放不下，并会自动换行。

此时第一行的内容就是“满”的（6 个字符），6 个字符的宽度之和仅为 90px，那么则会在行末产生剩余空间。

依此类推，多行的满行情况，且实际所有的字符宽度之间并不相等，那么每行的字符总宽度就不一样，进而就看起来不太“美观”。那么我们就用这个俩属性来优化， 以实现满行字符两端对齐，内容均匀分布：

text-justify: inter-ideograph;
text-align: justify;

两端对齐：是指行内的左边第一个字符贴紧元素 content 左边缘，右边的第一个字符就贴近元素 content 的右边缘。

内容均匀分布：在这里，一个中文字符会被当做一个字符；而一个串数字，一个英文单词，一个非中文字符标点符号，或者是前三者混搭的字符串，都将视为一个字符，以此为基础，在 content 内进行均匀分布。

对于内容不满一行的情况，不会受此影响。

条码

条码，一般情况是纯阿拉伯数字，纯英文字符，或者前两者混搭。

两端对齐，均匀分布

目前实现两端对齐，均匀分布的方案，其实还用到了 JavaScript 代码处理字符内容：以半格字符空格间隔所有字符。不然 HTML 渲染页面的时候仍会把条码当作一个字符看待。且兼容性好！PC，移动端都显示一致，比如微信的腾讯 X5 内核浏览器。（实在是想不出啥纯 CSS，且兼容性好的方案了。若你有更好的方案，欢迎赐教。

<div class="barcode">{{codeContent.split('').join(' ')}}</div>

.barcode {
  text-align: justify;
}
.barcode::after {
  display: inline-block;
  content: '';
  width: 100%;
}
​```