CSS细节之文本换行三属性

文本换行的三个属性

• 三属性分别为word-wrap、word-break、white-space.

浏览器默认换行方式

• 对于西文来说,以空格为间隔,每行容纳尽量多的单词,若整行无空格且超出浏览器显示边缘,则横向撑开浏览器边缘,并不换行
• 对于中文来说,则不论是否有空格,无法撑开浏览器边缘,到浏览器边缘则自动换行

接着我们来讨论word-wrap

• word-wrap: normal/break-word;
  
  • normal 即浏览器默认
  • break-word 中文与默认同效,西文为每行容纳尽量多的单词,若整行无空格且超出浏览器边缘,则在边缘处强制换行

接着是break-word

• break-word: normal/break-all/keep-all;
  
  • normal 即浏览器默认
  • break-all 中文与默认同效,西文为每行容纳尽量多的字符,浏览器边缘处强制换行
  • keep-all 中文以标点符号或空格为间隔,可将间隔符间的字符串视为字符串块,每行容纳尽量多的字符串块。西文与浏览器默认同效。

最后white-space

• white-space: normal/nowrap;
  
  • normal 即浏览器默认
  • nowrap 不论中文西文,不论是否有标点或空格,若文本过长,则横向撑开浏览器边缘