网页字符间距问题

关键词

•                   空格   转义符
• letter-spacing       字    符    间    距
• word-spacing       以空格隔开的连续字符      与下一个连续字符间距

例子

现有统计描述如下:

<span> Total:50 name:apple price:20.5 </span>

<span>总计：50条 名称：苹果 单价：20.5元</span>

在不考虑引用多个标签的情况下，我们偷懒用一个span标签，形成三列的效果

问题

• html不支持空格的解析
•  在模板语言里面（如：react/vue等），作为内容是不会被转义的，即原样输出

解决方案

• word-spacing: 对连续的字符以空格分割，进行间距修饰，中文字符空格隔开同样有效

效果

Total:50       name:apple       price:20.5
总计：50条       名称：苹果       单价：20.5元