CSS截取字符详解
平时我们在设计页面时，常会碰到列表框中文章标题过长的情况，通常情况下我们会采用字符截取函数来处理这个问题，非常的不方便。今天要介绍的是直接使用css代码来截取字符的长度。（谢谢Divhome.com提供案例）。
css截取字符宽度而是截取字符外的元素的宽度
overflow:hidden;隐藏超出的部分
white-space: nowrap;不换行
有了这2个属性就可以在一行内显示，如果需要多巷显示 取掉white-space: nowrap;
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS截取字符详解-示例</title>
<style type="text/css">
<!--
body {
margin:20px;
font:12px/150% "宋体";
}
.title{
width:220px;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
word-break:keep-all;
}
-->
</style>
</head>
<body>
<Div>这里是Divhome之家，Div学习、教程、资料下载 div>
<div class=title>Divhome之家，Div学习、教程、资料下载 </div>
</body>
</html>
代码解释：（谢谢Divhome.com提供案例）。
----------------------------------------------------------------------------------------------------------------------------------
overflow 版本：CSS2 兼容性：IE4+ NS6+ 继承性：无
语法：
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
----------------------------------------------------------------------------------------------------------------------------------
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
----------------------------------------------------------------------------------------------------------------------------------
white-space 版本：CSS1 兼容性：IE5.5+ NS4+ 继承性：有
语法：
white-space : normal | pre | nowrap
参数：
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）
说明：
设置或检索对象内空格的处理方式。
----------------------------------------------------------------------------------------------------------------------------------
word-break 版本：IE5+专有属性 继承性：无
语法：
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
----------------------------------------------------------------------------------------------------------------------------------
用CSS截取字符的优点在于它是在客户端执行，执行速度更快，不占用服务器资源；更利于搜索引擎的搜索。在使用时有一点需要注意，由于截取字符时不是按照字符长度进行截取，所以当text-overflow的属性为clip时，必需控制好块的宽度，不然会出现字符显示不完全的现象。
（谢谢Divhome.com提供案例）。
