主页 > 教程合集 > Html/css >

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

时间:2018-06-14 阅读:0

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

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

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

解决方法:

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:使用该属性时, 记得展示数据中的所有标点用中文哦, 有用过英文标点, 发现标点出现在行首, 为了稳妥, 还是全用中文标点吧!

如果这篇博文对你有帮助,希望您可以打赏给博主余斗,以支持余斗继续坚持下去!

余斗个人博客打赏二维码

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2018-06-14最后更新,转载注明出处。

相关推荐

返回顶部