您当前的位置：主页 > 教程合集 > Html/css > 网站首页Html/css

CSS文字排版中标点符号在行首出现的解决方法

发布时间：2018-06-14 14:25:31编辑：余斗阅读：(0)字号： 大 中 小

博客移动端改版后，突然发现内容页有一个问题：标点符号有时候会在行首出现。对于中国文字来说，这是不正规的，我们以前写作文的时候都知道，标点符号一定不可以出现在行首。之前在PC端预览的时候，并没有出现这个问题，只是有手机看的时候才发现。

PS: Chrome测挺好的, 但是并不是真机, 会有偏差, 还是各种手机测下最好。



解决方法：

1、一开始我是修改数据展示的width, 但是发现会有问题, 一修改, 所有手机都得测一遍(iphone5c, iphone6, iphone6p, 华为等), 总会有标点符号出现在行首.

2、后来又想到使用@media媒体查询, 针对不同的手机进行不同的width设置,  但是也是不好控制, 我甚至一度修改文字, 以防止出现问题.

3、最后研究发现只要加两个css样式即可解决问题，即word-break: normal; (自动换行, 标点不出现在行首)和text-align: justify; (为了显示好看, 文本对齐)。

之前用的是text-align: justify; 使文本两端对齐，然后用word-break: break-all; 来实现自动换行，就导致标点有时会出现在行首，用word-break: normal; 则可以完美解决此问题。

Tips：使用该属性时, 记得展示数据中的所有标点用中文哦, 有用过英文标点, 发现标点出现在行首, 为了稳妥, 还是全用中文标点吧！