Text-overflow,text-align,text-transform,text-decoration,text-shadow,text-fill-color,text-stroke的属性

本文详细介绍了CSS中的文本样式属性,包括文本溢出处理、水平对齐、大小写转换、文本装饰、阴影效果、填充颜色及边框颜色等,帮助读者掌握如何通过这些属性美化网页文本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.Text-overflow属性

  • 作用:设定内容溢出状态下的文本处理方式
  • 取值:
    • clip:默认值---当对象内文本溢出时不显示省略标记(...),而是将文本部分裁切掉。
    • ellipsis:---当对象内文本溢出时显示省略标记(...)

注意:该属性需要和overflow:hidden属性和white-space:nowrap(禁止换行)配合使用,否则无法看到效果。

 

2.text-align属性

  • 作用:设置或检索对象中内容的水平对齐方式。
  • 取值:
    • left 内容左对齐。
    • center 内容居中对齐。
    • right 内容右对齐。
    • justify 内容两端对齐。
    • start 内容对齐开始边界。(CSS3
    • end 内容对齐结束边界。(CSS3

 

3.text-transform属性

  • 作用:设置文本大小写。
  • 取值:
    • none 无转换
    • capitalize 将每个单词的第一个字母转换成大写
    • uppercase 将每个单词转换成大写
    • lowercase 将每个单词转换成小写
    • full-width 将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3

 

 

4.text-decoration属性

  • 作用:检索或设置对象中的文本的装饰。 
  • 取值:
    • [ text-decoration-line ]指定文本装饰的种类。相当于CSS2.1text-decoration 属性,可取值:none | underline | overline | line-through | blink Firefox1.0Opera4.0开始支持blink,其它浏览器尚不支持)
    • [ text-decoration-style ]指定文本装饰的样式。
    • [ text-decoration-color ]指定文本装饰的颜色。

 

5.text-shadow属性

 

  • 作用:设置或检索对象中文本的文字是否有阴影及模糊效果。 
  • 取值:
    • none无阴影
    • <length>1个长度值用来设置对象的阴影水平偏移值。可以为负值
    • <length>2个长度值用来设置对象的阴影垂直偏移值。可以为负值
    • <length>如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
    • <color>设置对象的阴影的颜色。

 

6.text-fill-color属性

    • 作用:文字填充颜色
    • 取值:颜色
    • 备注:使用该属性需要使用浏览器私有前缀

 

7.text-stroke属性

  • 作用:文本边框颜色,指定文字部分的颜色
  • 取值:
    • text-stroke-width:设置或检索对象中的文字描边厚度
    • text-stroke-color:设置或检索对象中的文字描边颜色

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值