text属性详解
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
pre-wrap 保留空白符序列，但是正常地进行换行。
四、word-wrap属性
版本：CSS3 继承性：无 语法： word-wrap ： normal | break-word 取值： normal： 控制连续文本换行。 break-word： 内容将在边界内换行。 说明： 设置或检索当当前行超过指定容器的边界时是否断开转行。
h1 {
text-shadow: 0 1px 0 #fff;
color: #292929;
}
下面看实例： <!DOCTYPE html><html><head><title>text-shadow</title> <meta charset="utf-8" /><style> body {background-color:#666; } h1 {text-shadow:0 1px 0 #fff;color:#292929;font:bold 90px Arial; padding:50px;} </style></head><body><h1>Hello,World!</h1</body></html> 运行效果（Chrome）：
可能的值：
值 normal pre 描述 默认。空白会被浏览器忽略。 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap
pre-line inherit
文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
合并空白符序列，但是保留换行符。 规定应该从父元素继承 white-space 属性的值。
下面来看一个高级应用：
<style> .box {text-overflow:ellipsis;-o-text-overflow:ellipsis;padding:20px;color:#000; overflow:hidden;white-space:nowrap;border:1px solid #000;width:400px;}
text-shadow
取值： <color> ：指定颜色。 <length> ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距 离。 <opacity> ： 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如 果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。 说明： 设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号 隔开。 text-shadow是可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必 须应用于文本，并它们有相同的四个参数： x-offset 水平位移 y-offest 垂直位移 blur 模糊值 color of shadow 阴影颜色
运行效果（Chrome）： 默认状态下只显示文章的第一句话:
鼠标移动到文字上显示全篇文章内容:
三、white-space
定义和用法 white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。值 prewrap 和 pre-line 是 CSS 2.1 中新增的。
语法： text-overflow ： clip | ellipsis 取值： clip： 不显示省略标记（...），而是简单的裁切。 ellipsis： 当对象内文本溢出时显示省略标记（...） 说明： 设置或检索是否使用一个省略标记（...）标示对象内文本的 溢出。 text-overflow属性仅是注解，当文本溢出时是否显示省略标 记。并不具备其它的样式属性定义。要实现溢出时产生省略 号的效果还须定义：强制文本在一行内显示（whitespace:nowrap）及溢出内容为隐藏（overflow:hidden），只 有这样才能实现溢出文本显示省略号的效果。
兼容性：
Internet Explorer (√)IE6 版本 (√)IE7 (√)IE8
类型
Firefox (×)Firefox 2.0 (×)Firefox 3.0 (√)Firefox 3.5
Chrome (√)Chrome 1.0.x (√)Chrome 2.0.x
Opera (×)Opera 9.63
下面用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
.box:hover {white-space:normal;color:#00ff00;background:#e3e3e3; border:1px solid #666;} </style> <body><div class="box">
元和十年，予左迁九江郡司马。明年秋，送客湓浦口。闻舟中夜弹琵琶者， 听其音，铮铮然有京都声。问其人，本长安倡女。尝学琵琶于穆、曹二善才， 年长色衰，委身为贾人妇。遂命酒使快弹数曲，曲罢悯然。自叙少小时欢乐事， 今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。 因为长句，歌以赠之，凡六百一十二言，命曰《琵琶行》。 浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。 醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。 寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。 千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。 弦弦掩抑声声思，似诉平生不得意。低眉信手续续弹，说尽心中无限事。 轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。 嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。 冰泉冷涩弦疑绝，疑绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。 银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。 东舟西舫悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。 十三学得琵琶成，名属教坊第一部。曲罢曾教善才伏，妆成每被秋娘妒。 五陵年少争缠头，一曲红绡不知数。钿头云篦击节碎，血色罗裙翻酒污。 今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。 门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。 去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。 我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识。 我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。 住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物，杜鹃啼血猿哀鸣。 春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛，呕哑嘲咋难为听。 今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作琵琶行。 感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。 座中泣下谁最多？江州司马青衫湿。</div></body>
默认值： 继承性： 版本：
normal yes CSS1
JavaScript 语法：
object.style.whiteSpace="pre"
实例 规定段落中的文本不进行换行： p { white-space: nowrap }
浏览器支持 所有浏览器都支持 white-space 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
Safari (√)Safari 3.1 (√)Safari 4
示例：
THANK YOU!
文字属性全解
一、text-shadow
二、text-overflow 三、white-space 四、word-wrap
一、text-shadow
语法： text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 相关属性 ： 无
兼容性：
text-overflow源自文库: clip
text-overflow : ellipsis
从上面的表中我们可以看出，Firefox对text-overflow:ellipsis 这一属性支持不是很好。
下面看个实例： <style> .test_demo_clip {text-overflow:clip; overflow:hidden; whitespace:nowrap; width:200px; background:#ccc;} .test_demo_ellipsis {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;} </style> <body> <h2>text-overflow : clip </h2> <div class="test_demo_clip"> 不显示省略标记，而是简单的裁切条 </div> <h2>text-overflow : ellipsis </h2> <div class="test_demo_ellipsis"> 当对象内文本溢出时显示省略标记 </div></body> 运行效果（Chrome）：