css 中文标点符号排版问题

Question

移动端页面中遇到个小问题，中文标点影响到了文字排版。
原文字："应急救援专用号牌分为汽车号牌和摩托车号牌两种汽车号牌每副两只分别悬悬挂在车辆后部“开”和“关”、“满”和“空”、“内”和“外”等概念。"
只设置font-size、color，不设置text-align、word-break等属性，css：{font-size:16px;color:#333333}如下图：

设置两端对齐：{text-align: justify;word-break: normal;}后效果：

现在的解决办法是$(em).text().split('').join(' ').css('letter-spacing', '-.1em')，效果看起来还行，但无法保证标点不出现在行首，各位大佬有先进经验传授一下么？

Answer 1

word-break:break-all;

如果有这个属性删掉。

Answer 2

你把所有的样式全部清除，再使用text-align: justify;试试，这个属性应该能够满足。

Answer 3

text-align: justify;

这个属性就可以设置两端对齐了了。