word break和word wrap
最近修改页面排版的一些问题，发现关于内容分词换行有两个主要的CSS：
特别是word-wrap还有个取值break-word，更使得这两个属性容易混淆。
先来看看这两个属性的定义和取值吧：
word-warp：用来表明是否允许长单词内断句而移至下一行。
只在允许断句点进行断句。比如单词连接符“-”。
break-word
内容将在边界内换行。如果需要，单词内部允许断句。
word-break：指定行内断句规则。
依照不同文本的规则决定是否在单词内断句。
break-all
允许单词内断句。
keep-all
不允许在成对单词间断句，主要是针对亚洲文本，对于中文，韩文，日文，不允许字断开。
PS. 上面两个CSS实际上对中文影响不大，主要是针对英文。
让我们看看默认情况下浏览器的行为，大致上都一样（代码见文末）：
测试浏览器版本： 24.0 , 30.0 , IE10, IE8
从上面可以看出，其实换行是一种默认行为，如果容器宽度不足第一考试网，会在允许换行的点进行换行（比如空格，单词连接符等等）。因此，word-wrap其实是专门为长单词准备的。
接下来，看看加上 word-wrap: break-word 之后，除了IE8以外，其他行为基本一致：
而至于低版本的IE，好吧，悲剧的数字符号：
总结下word-wrap: break-word的问题：
1. 在长单词的上一行可能会留下大量空白，但是由于一般单词长度并不会出现那么多字符，因此这个缺点其实可以接受；
2. 低版本的IE对于带符号的数字不作为一个整体来断句。
再来看看word-break:break-all的用法，首先要注意一点css wordwrap，它必须与word-wrap: break-word一起使用才能起作用。包括旧版本的IE，几个浏览器的行为都基本一致了：
可以看出，break-all的行为简单粗暴css wordwrap，就是完全不考虑单词连贯性，直接将其断句。这样虽然看上去节省了空间，但是却损失了可读性。因此，除非页面中出现连续无意义的长字符，否则不建议用起进行单词换行处理。
另一方面，可以看到，break-all可以解决低版本IE带符号数字的问题，因此可以考虑将其单独用在数字上。（适合不是有多个数字在同一容器）
HTML代码
| product | balance |
|---|---|
| testtesttesttesttesttesttest | 333333333333333333333333333 |
| test testtesttesttesttesttesttest | -99999999999.9999999 |
| testestestest-testtest | -999999999~999999999 |
| test testing test test test | 8888 888888 8888 8888 8888 |
| 中文中文中文中文中文中文中文testtesttesttesttesttest | 0.000000000000000000000001 |
CSS代码：
body {
color: #000000;
background-color: #ffffff;
font-family: arial, verdana, sans-serif;
}
table {
background-color: #efefef;
border-style: solid;
border-width: 1px;
border-color: #999999;
table-layout: fixed;
width: 200px;
}
th {
background-color: #cccccc;
font-weight: bold;
padding: 5px;
}
td {
padding: 5px;
width: 100px;
word-wrap: break-word;
}
td.numeric {
word-break:break-all;
}
CSS： word-wrap和word-break的更多相关文章 word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break( | break-all | keep-all):表示断词的方式 word wrap(norma ...
word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
POI 读取word (word 2003 和 word 2007) （转）
最近在给客户做系统的时候,用户提出需求,要能够导入 word 文件,现在 word 有好几个版本 97.2003.2007的,这三个版本存储数据的格式上都有相当大的差别,而现在 9 ...
JSP利用生成基于word模板的word文档
利用生成基于word模板的word文档 简介 是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.与Web容器 ...
【jacob word】使用jacob，合并多个word为一个word文件
将几个word文件合并到一个word文件,使用注意点: 1.后面附项目运用的jar包jacob-1.9, 2.并且jacob运用中,需要将附件内的jacob.dll放到/ ...
使用Word API打开Word文档 ASP.NET编程中常用到的27个函数集
使用Word API(非)打开Word文档简单示例(必须安装Word) 首先需要引入参照...Word 代码示例如下: void ...
利用模板导出文件（二）之jacob利用word模板导出word文件（）
先下载jacob.jar包.解压后将ja ...
生成word附件和word域动态赋值
生成word文档和word域动态赋值,很多时候需要生成这样的word文档供下载和打印,先制作一个包含了域的 word的模板附件,放在服务器端或者字节流存入数据库,以供需要的时候代码可以获取到,如: 其 ...
POI 读取word (word 2003 和 word 2007)（转，好用）
POI 读取word (word 2003 和 word 2007)(转,好用) 转做的操作: 将作者文中失效的链接的正确链接放在失效链接的下面. 最近在给客户做系统的时候,用户提出需求,要能够导入 ...
html+css写出类似word目录样式的内容
word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...
随机推荐 XML通過XSD產生CLASS
步驟一:通過XML獲取XSD 格式:xsd "XML的完整路徑帶文件名" /O:"輸出路徑不帶文件名". C:\\system32>xsd ...
无法创建spool文件
是因为没有用管理员运行CMD,并且数据库不需要使用超级管理员登录.
配套的js框架
求几个搭配的js框架.实现如表单验证,文件多传下载等等 File Input文件选择控件: 通知插件: 时间拾取器: Boot ...
:8399//rest// 访问不了
一.问题: 安装完后,rest服务:8399//rest//访问不了 二.问题原因: 查看了一下日志,其中记录了几个r ...
的配置使用
1.单纯的上传图片和预览图片 修改中 = true; 否则的话会报没有权限或修改配置错误 此时如果可以查看的话,单击图片应该是放大并且预览图片 ...
C++ 练习13.36
# once # # using std; class { ...
(easy) 242.Valid
Given two s and t, write a to if t is an of s. For ,s = &q ...
(转)自动生成在线文档
原文链接: 前言:这两天在整的服务,由于调用方是客户端,开发人员 ...
sql查询，如何增加一列
* from ( '' as ,count(1)as num from . ...
注册码
是一款功能强大的文字处理软件.它可以充分的替换记事本,它也提供网页作家及程序设计师许多强悍的功能.支持 HTML.CSS.PHP.ASP.Perl.C/C++.Java. ...