css3 关于文字,字体属性(转载)
2017-01-17 12:01
302 查看
1.text-overflow属性(实现省略号效果)
text-overflow用来设置是否使用一个省略标记(…)标示对象内文本的溢出。【语法】
❤text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),代码如下:
text-overflow:ellipsis; overflow:hidden; /*溢出内容为隐藏*/ white-space:nowrap; /*强制文本在一行内显示,直到遇到 <br> 标签为止。*/
【例题】
【网易2016内推笔试题】 <p>这是一段长度超过P元素的文字</p> p{width:100px; white-space:nowrap;} 问:添加哪个会使得超出的部分变成省略号“…”? BD A.white-space:normal B.overflow:hidden C.overflow:auto D.text-overflow:ellipsis
2.word-wrap属性
word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。单词太长的话就超出某个区域,在CSS3中,实现文本强制文本进行换行的属性是word-wrap属性,当它的值等于break-word的时候,就可以实现文本强制换行,可以对单个单词进行拆分。
【语法】
normal为浏览器默认值;
break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
3.嵌入字体@font-face
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。【语法】
@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。
【例如】
html: <div class="demo">IMOOC</div> css: @font-face{ font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); } .demo { width: 340px; font-size:58px; font-family: "MOOC Font"; }
4.文本阴影text-shadow
text-shadow可以用来设置文本的阴影效果。【语法】
text-shadow: X-Offset Y-Offset blur color;
X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
Color:是指阴影的颜色,其可以使用rgba色。
【例如】
text-shadow: 0 1px 1px #fff;
相关文章推荐
- 转载关于jxl的设置字体属性的文章
- [转载] Rod Johnson关于AOP Transaction的一段文字
- 设定Gtk menu 上的文字属性,比如字体和颜色
- 关于CSS3中transform属性对元素布局的影响。
- SpannableString来设置超链接、颜色、字体等属性--具体到文字中的某个文字
- html5 css3关于网页字体设置
- Thin的DateChooser代码学习(关于js的函数参数为一个完整的函数以及“对象不支持此属性或方法”错误的解决)(原创,转载请声明)
- CSS3新增属性text-shadow详解及燃烧的字体实战开发
- 【转载】深入了解CSS3中的Transform属性
- 使IE浏览器支持CSS3属性(圆角、阴影、渐变、文字阴影)
- opencv文字和字体(转载)
- 关于xmlhttprequest的readystate属性的五个状态(转载)
- 关于css3 分栏 column属性
- 关于apply属性使用的一些例子(转载来自用户:tan_dan)
- 关于在build.prop里加入改变android默认字体大小的属性
- CSS font-size字体文字大小样式属性
- 利用属性(Attribute)扩展元数据,关于自定义配置节(转载)
- 关于xmlhttprequest的readystate属性的五个状态(转载)
- [转载] 关于Winform编译中的属性设置
- 让IE6/IE7/IE8浏览器支持CSS3属性(转载)