星空网 > 软件开发 > 网页设计

文本溢出text

×
目录
[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;

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

常见效果

【文字阴影代码查看】




原标题:文本溢出text

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

英国TikTok小店:https://www.goluckyvip.com/tag/47912.html
英国TikTok小店入口:https://www.goluckyvip.com/tag/47913.html
英国TikTok小店玩法:https://www.goluckyvip.com/tag/47914.html
英国TikTok小店运营:https://www.goluckyvip.com/tag/47915.html
英国TikTok小黄车:https://www.goluckyvip.com/tag/47917.html
FBA仓储费:https://www.goluckyvip.com/tag/4792.html
连麦专家:2024年到底如何做小红书? :https://www.kjdsnews.com/a/1836446.html
9点聊电商:小米再向前:小米SU7正式发布、引领汽车“智能化”下半场 “人车家全生态 :https://www.kjdsnews.com/a/1836447.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流