文本溢出text-overflow和文本阴影text-shadow_html/css_WEB-ITnose
前面的话
CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性。本文将详细介绍这两个作用在文本上的溢出和阴影属性
文本溢出
一般地,人们一提到文本溢出,想到的就是文本溢出的经典代码
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
但实际上,文本换行不一定非要使用white-space;overflow属性值也不一定非要使用hidden。
定义
text-overflow
值: clip | ellipsis
初始值: clip
应用于: 块级元素、替换元素、表单元格
继承性: 无
clip: 不显示省略标记(...),只是简单的裁切,相当于无效果ellipsis: 文本溢出时显示省略标记(...),省略标记插入的位置是最后一个字符
[注意]当文本溢出属性应用于表单元格时,需要设置table-layout:fixed
[注意]该属性兼容性很好,兼容IE6+的主流浏览器及移动端iso和android
实现
【1】当存在长英文文本时,text-overflow属性起作用的前提是
overflow(或overflow-y或overflow-x):hidden | auto | scroll
【2】当文本为汉字时,text-overflow属性起作用的前提是
实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap;overflow(或overflow-y或overflow-x):hidden | auto | scroll
文本阴影
类似于盒子阴影,文本阴影也有x轴偏移、y轴偏移、模糊半径和阴影颜色这四个值,但是并没有阴影尺寸和内部阴影这两个值
定义
text-shadow
值: none | (h-shadow v-shadow blur color)+
初始值: none
应用于: 所有元素
继承性: 无
h-shadow: 水平阴影位置(必须)v-shadow: 垂直阴影位置(必须)blur: 模糊距离(该值不能为负值,可选)color: 阴影颜色,默认和文本颜色一致(可选)
[注意]该属性IE9-浏览器不支持
//多层阴影text-shadow: 1px 1px blue,5px 5px 5px red;
[注意]不要加太多层阴影,会有性能问题
常见效果
【文字阴影代码查看】
上一篇: Java数组、list的转化合并
下一篇: Android OpenCV 灰度图转化
推荐阅读
-
文本溢出text-overflow和文本阴影text-shadow_html/css_WEB-ITnose
-
使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题_html/css_WEB-ITnose
-
CSS基础:text-overflow:ellipsis溢出文本_html/css_WEB-ITnose
-
文本溢出text-overflow和文本阴影text-shadow_html/css_WEB-ITnose
-
《CSS3实战》笔记文本阴影:text-shadow_html/css_WEB-ITnose
-
使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题_html/css_WEB-ITnose
-
《CSS3实战》笔记文本阴影:text-shadow_html/css_WEB-ITnose
-
CSS基础:text-overflow:ellipsis溢出文本_html/css_WEB-ITnose
-
css中text-overflow:ellipsis文本溢出产生省略号_html/css_WEB-ITnose
-
文本溢出text-overflow和文本阴影text-shadow - 小火柴的蓝色理想