博客移动端改版后,突然发现内容页有一个问题:标点符号有时候会在行首出现。对于中国文字来说,这是不正规的,我们以前写作文的时候都知道,标点符号一定不可以出现在行首。之前在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:使用该属性时, 记得展示数据中的所有标点用中文哦, 有用过英文标点, 发现标点出现在行首, 为了稳妥, 还是全用中文标点吧!
资源均来自第三方,谨慎下载,前往第三方网站下载