|
因为下划线图形是定位于链接元素的底部,所以我们需要保证链接不能横跨多行(如果他们被允许跨越多行,那么只有最低的一行链接文本显示自定义下划线)。我们将使用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%; }
作者:佚名 | 文章来源:本站原创 | 更新时间:2007-7-2 14:09:00
|