{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

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

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


资源均来自第三方,谨慎下载,前往第三方网站下载


米微资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS文字排版中标点符号在行首出现的解决方法
喜欢 ()分享 (0)