text属性详解.ppt

文字属性全解 一、text-shadow 二、text-overflow 三、white-space 四、word-wrap * 一、text-shadow text-shadow 语法： text-shadow ： none | length none | [shadow, ] * shadow 或none | color [, color ]* 相关属性 ： 无 取值： color ：指定颜色。 length ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。 opacity ： 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。 说明： 设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。 　　text-shadow是可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数： 　　x-offset 　　水平位移 　　y-offest 　　垂直位移 　　blur 　　 模糊值 　　color of shadow 阴影颜色 * 　 ?? h1 {　　text-shadow: 0 1px 0 #fff; 　　color: #292929;} * 下面看实例： ?? !DOCTYPE htmlhtmlheadtitletext-shadow/title meta charset=utf-8 /stylebody {background-color:#666; }h1 {text-shadow:0 1px 0 #fff;color:#292929;font:bold 90px Arial;　　padding:50px;}/style/headbodyh1Hello,World!/h1/body/html ?? 运行效果（Chrome）： ?????????????????????????????????????????????????????????????????????????????????? 下面用text-shadow实现空心字效果: h1 { text-shadow:0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; color:#fff;font:bold 90px Arial;} 运行效果（Chrome）： ?????????????????????????????????????????????????????????????????????????????????? * 二、text-overflow 语法： text-overflow ： clip | ellipsis 取值： clip： 不显示省略标记（...），而是简单的裁切。 ellipsis： 当对象内文本溢出时显示省略标记（...） 说明： 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。 * 兼容性： text-overflow : clip ????????????????????????????????????????????????????????????????????????????????????????????? text-overflow : ellipsis ?????????????????????????????????? ??????????????????????????????????????????????????????????? 从上面的表中我们可以看出，Firefox对text-overflow:ellipsis 这一属性支持不是很好。 * 下面看个实例： ??style .test_demo_clip {text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}.test_demo_ellipsis {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; wid