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. json基础教程|理解Json

    一. 在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式.这一期讨论一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地 ...

  2. 使用python制作ArcGIS插件（3）ArcPy的使用说明

    使用python制作ArcGIS插件(3)ArcPy的使用说明 by 李远祥 ArcPy 是一个以成功的 arcgisscripting 模块为基础并继承了 arcgisscripting 功能进而构 ...

  3. 神秘的ApplicationPoolIdentity再也不用妈妈担心程序池安全了

    在IIS 7和IIS 7.5中,我们可以为应用程序池设置一个特殊的Identity(用户标识):ApplicationPoolIdentity. 那么这个标识到底是什么意思?它是具体什么身份呢?这一讲 ...

  4. （原）SQL Server 系统提供功能的三个疑惑

    本文目录列表: 1.SQL Server系统提供的部分疑惑概述2.系统函数调用时DEFAULT代替可选参数使用不统一3.队列字段列message_enqueue_time记录的是UTC日期时间 4.@ ...

  5. java字节数组格式化为十六进制字符串

    /** * 格式化byte * * @param b * @return */ public static String byte2hex(byte[] b) { char[] Digit = { ' ...

  6. GCD 多线程 ---的记录 iOS

    先写一个GCD static UserInfoVoModel *userInfoShare = nil; +(instancetype)shareUserInfoVoModel { static di ...

  7. iOS之网络数据下载和JSON解析

    iOS之网络数据下载和JSON解析 简介 在本文中笔者将要给大家介绍IOS中如何利用NSURLconnection从网络上下载数据以及如何解析下载下来的JSON数据格式,以及如何显示数据和托图片的异步 ...

  8. shell编程其实真的很简单（五）

    通过前几篇文章的学习,我们学会了shell的基本语法.在linux的实际操作中,我们经常看到命令会有很多参数,例如:ls -al 等等,那么这个参数是怎么处理的呢? 接下来我们就来看看shell脚本对 ...

  9. Android之RecyclerView轻松实现下拉刷新和加载更多

    今天研究了下RecyclerView的滑动事件,特别是下拉刷新和加载更多事件,在现在几乎所有的APP显示数据列表时都用到了.自定义RecyclerView下拉刷新和加载更多听上去很复杂,实际上并不难, ...

  10. pyqt的 .ui 转换为 .py 后的操作注意事项

    1. 增加 import sys 2. 将 Ui_MainWindow(object) 中的 object 修改成修改成 QtGui.QMainWindow 3. 在 Ui_MainWindow 类中 ...