视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
文本溢出text-overflow和文本阴影text-shadow-小火柴的蓝色理想
2020-11-27 16:43:02 责编:小采
文档

×
目录
[1]文本溢出 [2]文本阴影

前面的话

  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;

  [注意]不要加太多层阴影,会有性能问题

常见效果

【文字阴影代码查看】

显示全文
专题