因为下划线图形是定位于链接元素的底部，所以我们需要保证链接不能横跨多行（如果他们被允许跨越多行，那么只有最低的一行链接文本显示自定义下划线）。我们将使用CSS的white-space属性禁止链接文本换行。
a { white-space: nowrap; }
-------------------------------------------------
[补充]
语法：
white-space : normal | pre | nowrap
取值：
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
说明：
设置或检索对象内空格字符的处理方式。
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。
此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
-------------------------------------------------
链接元素的所有CSS属性可以合并为：
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
如果你想自定义下划线的效果只在鼠标滑过链接时出现，只需设置CSS背景属性为:hover伪类，取代直接设置于链接元素上的样式即可。
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
示例
这个 静态的下划线和这个翻转效果可用于流行时尚设计。
宝贝，这个静态下划线和这个翻转效果很帅吧。
这个静态下划线和这个动画翻转效果 可用于显示外部链接
（动画翻转效果并非能在所有浏览器都显示，例如Safari 1.0，只能显示动画的第一帧）。
|
设为首页
加入收藏
总编信箱
投稿或申请专栏请先 [登 陆]
