浏览器对中⽂标点符号折⾏的处理差异
⽹站前台有时候遇到的⿇烦很奇怪，前段时间，我遇到了⼀个问题：chrome下读取中⽂标点符号时版块错位，⽽其他浏览器正常。
这是因为各个浏览器对中⽂标点符号折⾏的处理有差异。
问题描述
制作中⽂页⾯并使⽤标点符号时，不同浏览器对于中⽂标点的折⾏判定条件有差异。
造成的影响
由于不同浏览器对于中⽂标点的折⾏条件有差异，若在对段落⽂字进⾏排版布局时，过分依赖当前段落⽂字⾃动计算的尺⼨可能会产⽣折⾏差异，最终可能导致⽂字布局存在少许差异。
问题分析
1. 中⽂标点书写规范
标点符号是辅助⽂字记录语⾔的符号，是书⾯语的有机组成部分，⽤来表⽰停顿、语⽓以及词语的性质和
作⽤。
中⽂标点分为 "点号" 与 "标号" 两⼤类：
点号的作⽤在于点断，主要表⽰说话时的停顿和语⽓。
点号⼜分为句末点号和句内点号。句末点号⽤在句末，有句号【。】、问号【？】、叹号【！】3种，表⽰句末的停顿，同时表⽰句⼦的语⽓。
句内点号⽤在句内，有逗号【，】、顿号【、】、分号【；】、冒号【：】4种，表⽰句内的各种不同性质的停顿；
标号的作⽤在于标明，主要标明语句的性质和作⽤。
常⽤的标号有9种，即：引号【 "XX" ‘XX’】、括号【（XX）】、破折号【——】、省略号【……】、着重号、连接号、间隔号、书名号和专名号。
中⽂标点书写时在⾏内的位置
句号、问号、叹号、逗号、顿号、分号和冒号⼀般占⼀个字的位置，不出现在⼀⾏之⾸；
引号、括号、书名号的前⼀半不出现在⼀⾏之末，后⼀半不出现在⼀⾏之⾸；
破折号和省略号都占两个字的位置，中间不能断开。连接号和间隔号⼀般占⼀个字的位置。这四种符号上下居中；
着重号、专名号和浪线式书名号标在字的下边，可以随字移⾏。
2. 各浏览器对中⽂标点⾃动折⾏的规则差异
分析如下代码：
<style>
.c { float:left; }
.d { width:24px; background:#DDD; font:12px 宋体; float:left; margin:5px 10px 0 0; display:inline; }
</style>
<h1>标号：</h1>
<div >
<div class="c">
<div class="d">你。你好</div>
<div class="d">你好。你</div>
</div>
<div class="c">
<div class="d">你？你好</div>
<div class="d">你好？你</div>
</div>
<div class="c">
<div class="d">你！你好</div>
<div class="d">你好！你</div>
</div>
<div class="c">
<div class="d">你，你好</div>
<div class="d">你好，你</div>
</div>
<div class="c">
<div class="d">你、你好</div>
<div class="d">你好、你</div>
</div>
<div class="c">
<div class="d">你；你好</div>
<div class="d">你好；你</div>
</div>
<div class="c">
<div class="d">你：你好</div>
<div class="d">你好：你</div>
</div>
</div>
<h1>标号：</h1>
<div >
<div class="c">
<div class="d">你 "你好</div>
<div class="d">你好 "你</div>
</div>
<div class="c">
<div class="d">你" 你好</div>
<div class="d">你好" 你</div>
</div>
<div class="c">
<div class="d">你‘你好</div>
<div class="d">你好‘你</div>
</div>
<div class="c">
<div class="d">你’你好</div>
<div class="d">你好’你</div>
</div>
<div class="c">
<div class="d">你（你好</div>
<div class="d">你好（你</div>
</div>
<div class="c">
<div class="d">你）你好</div>
<div class="d">你好）你</div>
</div>
<div class="c">
<div class="d">你《你好</div>
<div class="d">你好《你</div>
</div>
<div class="c">
<div class="d">你》你好</div>
<div class="d">你好》你</div>
</div>
<div class="c" >
<div class="d" >你好……你好</div>
<div class="d" >你好你……好</div>
<div class="d" >你好你好……</div>
</div>
<div class="c" >
<div class="d" >你好——你好</div>
<div class="d" >你好你——好</div>
<div class="d" >你好你好——</div>
</div>
上⾯代码测试了⼀些常⽤的中⽂标点符号可能出现在⾏框⼀⾏的结尾或者开头时浏览器对其折⾏的处理情况。这段代码在不同浏览器中运⾏结果如下：
可见，对于 "标号" ，所有浏览器的处理均相同，即标号可以出现在⾏的结尾，但不能出现在⾏的开头。
下⾯继续对点号进⾏测试，其结果如下：
IE Firefox Safari/Chrome/Opera
可见，对于 "点号" ：
在 IE 中，允许引号、括号、书名号的前⼀半出现在⾏的开头，允许引号、括号、书名号的后⼀半出现在⾏的结尾；允许省略号出现在⾏的结尾，但不允许省略号出现在⾏的开头，且省略号为两个字符，这两个字符之间不可分割；允许破折号出现在⾏的⼏位，但不允许破折号出现在⾏的开头，且破折号为两个字符，这两个字符之间可以分割；
在 Chrome Safari Opera 中，⽆论引号的前⼀半还是后⼀半⼀律不允许出现在⾏的开头与结尾；允许括号、书名号的前⼀半出现在⾏的开头，允许括号、书名号的后⼀半出现在⾏的结尾；允许省略号、破折号出现在⾏的开头和结尾，且省略号与破折号为两个字符，这两个字符之间不可以分割；
在 Firefox 中，引号、括号、书名号的情况与IE类似，省略号、破折号的情况与 Chrome 类似。
【注】本⽂讨论的情况均为中⽂标点符号在连续的上下⽂之间的情况，不包含：
强⾏使标点符号位于⾏的开头；
强⾏使标点符号位于⾏的结尾；
使⽤禁⽌换⾏或者强制换⾏等。
下⾯列表说明各浏览器对常⽤中⽂标点符号的折⾏条件：
IE6 IE7
IE8
Firefox Chrome Safari Opera 句号。⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾问号？⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾叹号！⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾逗号，⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾顿号、⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾分号；⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾冒号：⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾
前双引号“⾏开头⾏开头禁⽌⾏开
头与结尾
禁⽌⾏开
头与结尾
禁⽌⾏开头与
结尾
后双引号”⾏结尾⾏结尾禁⽌⾏开
头与结尾
禁⽌⾏开
头与结尾
禁⽌⾏开头与
结尾
前单引号‘⾏开头⾏开头禁⽌⾏开
头与结尾
禁⽌⾏开
头与结尾
禁⽌⾏开头与
结尾
后单引号’⾏结尾⾏结尾禁⽌⾏开
头与结尾
禁⽌⾏开
头与结尾
禁⽌⾏开头与
结尾
左括
号
（⾏开头⾏开头⾏开头⾏开头⾏开头
右括
号
）⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾
左书
名号
《⾏开头⾏开头⾏开头⾏开头⾏开头
右书
名号
》⾏结尾⾏结尾⾏结尾⾏结尾⾏结尾
省略号……⾏结尾⾏开头
⾏结尾
chrome浏览器怎么设置中文⾏开头⾏
结尾
⾏开头
⾏结尾
⾏开头⾏结尾
破折号——⾏结尾⾏开头
⾏结尾
⾏开头⾏
结尾
⾏开头
⾏结尾
⾏开头⾏结尾
解决⽅案
对段落⽂字排版时须谨慎，注意标点符号的位置。如果不好控制⽂字内容，可以使⽤根据⽂字内容所占的⾼度动态缩改⽂字内容。
发表评论