CSS中一提到单词断行，最先映入脑海的肯定是word-break和word-wrap这两条属性。但对于这两条属性到底有什么区别，兼容性如何，我一直都概念模糊。今天抽空把它们以及CSS3中新加入的断行属性之间的区别和作用理理清楚，做一下笔记。

在英文段落中有时会碰到一些很长的单词，这些单词的长度超出容器宽度。在默认的页面文档中，如果单词长度超出了单行，会被自动移到下一行中，图中puzzling!就被自动换行了；而如果单词本身的长度已经超出容器宽度，常规的文档对此就没有约束力了，图中dddddd…这个单词就这么溢出了：

为了不让这样超长的单词超出容器宽度，可以用word-break: break-all 强制断行。

但是强制换行会把完整的单词打断，会影响阅读，而且一旦用word-break: break-all，单词内断行的频率会非常高（puzzling!这个不词不算长单词，也被轻易的打断了）。我们需要的只是在单词本身长度超出容器宽度的时候强制断行，一般情况下，只需要根据空格来判断后面的单词是否需要换行，所以用word-wrap: break-word 就可以了：

所以用一个word-wrap: break-word，就能满足网页上最基本的换行排版了。

让我们再深入一点。读书时候英语老师曾教过我们，英语书写在换行的时候，为了节约纸张，把每一行最后的格子也利用起来，可以给没写完的那个单词加一个横杠“-”在下一行继续写完这个单词即可。在网页中有没有办法实现？答案还是有的，只是这是一个CSS3的属性：hyphens: auto
hyphens目前被浏览器支持度还比较有限，当前版本的谷歌浏览器Chrome就不支持，据我测试在Firefox，IE10+，Safari中还是被支持的，不过要给她加上几个熟悉的前缀：

1

2

3

4

-moz-hyphens: auto;

-ms-hyphens: auto;

-webkit-hyphens: auto;

hyphens: auto;

同时页面的编码也需要写成这种格式允许的语种：

1

<html lang="en-US">

于是puzzling!这个单词在支持hyphens的浏览器中就自动加了横杠断行了：

配合word-wrap: break-word，就是一般我们需要的排版效果了：

1

2

3

4

5

6

7

div {

	-moz-hyphens: auto;

	-ms-hyphens: auto;

	-webkit-hyphens: auto;

	hyphens: auto;

	word-wrap: break-word;

}

另外，hyphens还有一个有趣的值：manual，可以通过特殊符号给单词人为的添加横杠断行，但个人觉得很少能用得到。具体可以参考mozilla的官方文档，里面还有浏览器兼容性列表

本文的实例代码在这里：http://blog.brain1981.com/wp-content/uploads/css-wordBreak.html。可以在不同的浏览器中打开这个页面查看单词断行的区别。

本站所有文章均为原创，欢迎转载，但请注明文章出处：http://blog.brain1981.com/706.html

英文单词断行问题：CSS中word-break、word-wrap以及hyphens的兼容性和区别的更多相关文章

  1. css强制html不换行 css强制英文单词断行 重拾丢失的

    css强制html不换行 css强制英文单词断行 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-brea ...

  2. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  3. LeetCode之“动态规划”：Word Break && Word Break II

     1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...

  4. 17. Word Break && Word Break II

    Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...

  5. LeetCode ||& Word Break && Word Break II（转）——动态规划

    一. Given a string s and a dictionary of words dict, determine if s can be segmented into a space-sep ...

  6. 理解css中min-width和max-width，width与它们之间的区别联系

    css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width.就被它们的值所代替,尤其适 ...

  7. CSS中inherit指定继承的使用方法和auto的区别

    CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...

  8. leetcode@ [139/140] Word Break & Word Break II

    https://leetcode.com/problems/word-break/ Given a string s and a dictionary of words dict, determine ...

  9. 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄

    做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...

随机推荐

  1. MVC View显示详解(RenderBody,RenderPage,RenderSection,Partial)

    一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...

  2. foreach和for循环的区别

    for循环 for循环,通过下标,对循环中的代码反复执行,功能强大,可以通过index取得元素.在处理比较复杂的处理的时候较为方便. foreach循环 foreach,从头到尾,对于集合中的对象遍历 ...

  3. java udp 发送小数数字（较难）

    代码全部来自:http://825635381.iteye.com/blog/2046882,在这里非常感谢了,我运行测试了下,非常正确,谢谢啊 服务端程序: package udpServer; i ...

  4. oracle 随笔

    oracle分页 select * from (select a1.*, rownum rn from (select *from emp) a1 where rownum<=10) where ...

  5. JavaScript中国象棋程序（6） - 克服水平线效应、检查重复局面

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第6节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  6. 配置NFS服务与tftp服务

    在VMware在安装ubuntu的图解 链接:http://pan.baidu.com/s/1jIofvYu 密码:da72 图解里已经解压安装了VMware Tools,接下来必须要安装的就是NFS ...

  7. 2月22日 《从Paxos到Zookeeper 分布式一致性原理与实践》读后感

    zk的特点: 分布式一致性的解决方案,包括:顺序一致性,原子性,单一视图,可靠性,实时性 zk的基本概念: 集群角色:not Master/Slave,is Leader/Follower/Obser ...

  8. esri-leaflet入门教程（5）- 动态要素加载

    esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

  9. 理解WEB API网关

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  10. ios用户体验

    如果转载此文,请注明出处:http://blog.csdn.net/paulery2012/article/details/25157347,谢谢! 前言: 本文是在阅读<ios用户体验> ...