设置letter-spacing后文本无法居中的问题
问题描述
假设我们有一段文本，在盒子内居中，示例：
html
<div style="width: 240px; text-align: center; border: 1px solid black;">
<span style="background-color: yellowgreen;">这是一段文本</span>
</div>这是一段文本
如果我们给文本添加一些字间距：
html
<div style="width: 240px; text-align: center; border: 1px solid black;">
<span style="background-color: yellowgreen; letter-spacing: 4px;">这是一段文本</span>
</div>这是一段文本
可以发现，实际上最后一个字后面也有一段空白间距，这导致文本无法在盒子内无法正常居中：
解决方式
可以使用 text-indent 来设置一个往右的缩进：
html
<div style="width: 240px; text-align: center; border: 1px solid black; text-indent: 4px;">
<span style="background-color: yellowgreen; letter-spacing: 4px;">这是一段文本</span>
</div>这是一段文本
眼睛可能看不出区别，但实际上，text-indent 给文本前面设置了一段 4px 的缩进，这个可以使用浏览器控制台查看。
