CSS3新增文本属性详述_html/css_WEB-ITnose

CSS文本属性复习

1、white-space：对象内空格的处理方式
2、direction：文本流的方向
3、unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

1.white-space：对象内空格的处理方式
nowrap 控制文本不换行
pre 空白会被浏览器保留
normal 默认状态
pre-line 合并空白保留换行符
pre-wrap 保留空白正常换行
nowrap经常配合text-overflow一起使用，使得超出部分显示为省略号，主要overflow一定要设置为hidden，如下：

                    p{ width: 200px;font-size: 20px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden; }              被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

效果如下图所示：

还可以在样式中增加p:hover{normal;}这样正常状态下超出部分显示省略号，而鼠标悬停在p之上时，显示完整内容。
再看下其它的几个属性：

p{width: 400px;font-size: 18px; background: #CBFF8F;line-height: 36px;} .pre{white-space: pre;/*空白被浏览器保留*/} .pre-line{white-space: pre-line;/*合并空白，保留换行符*/} .pre-wrap{white-space: pre-wrap;/*保留空白，正常换行*/}

在理解this绑定之前，先要理解调用位置。我们可以通过浏览器的调试工具来查看调用栈。在第一行代码钱插入一条debugger;

效果图如下：

如果元素内容未超出范围，pre和pre-wrap的效果是一样的，只有超出范围时，才有区别，pre是不会自动换行的，而pre-wrap到元素边界处，自动换行。
2、direction：文本流的方向
ltr 文本从左向右
rtl 文本从右往左

                   p{background: #e3e3e3;padding: 5px; width: 200px;} .left{direction: ltr;} .right{direction: rtl;}        文本流的方向
    文本流的方向
    文本流的方向

效果：

3、unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
bidi-override 严格按照属性的值重排序。忽略隐式双向运算规则。
unicode-bidi默认的属性值为normal，此外，在CSS3中还增加了另外几个属性值： isolate 、 isolate-override 、plaintext
仅举例说明bidi-override：(unicode-bidi属性在项目中使用频率很低)

                    p{background: #e3e3e3;padding: 5px; width: 200px;} .left{direction: ltr;unicode-bidi: bidi-override;} .right{direction: rtl;unicode-bidi: bidi-override;}        文本流的方向
    文本流的方向

效果如下：

CSS3新增文本属性
1、color:rgba();
2、text-overflow:是否使用一个省略标记（…）标示对象内文本的溢出
3、text-align:文本的对齐方式
4、text-transform:文字的大小写
5、text-decoration:文本的装饰线，复合属性
6、text-shadow:文本阴影
7、text-fill-color:文字填充颜色
8、text-stroke:复合属性。设置文字的描边
9、tab-size:制表符的长度
10、word-wrap:当前行超过指定容器的边界时是否断开转行

1、rgba()
r red 红色 0-255
g green 绿色 0-255
b blue 蓝色 0-255
a alpha 透明 0-1
rgba比rgb增加了一个透明度，此前我们使用opacity设置透明度，但是使用opacity会使得文字也变得透明，而rgba则不会，如下：

                    div{font-size: 24px; width: 200px; font-weight: 600; margin: 20px; height: 200px; line-height: 200px;text-align: center;float: left;} .div1{background:rgb(0,146,255); opacity: 0.5;} .div2{background: rgba(0,146,255,0.5);} .img{width:400px;height:300px; background: url(images/photo2.jpg) center; border: 25px solid rgba(0,0,0,0.6);}        文本属性

      
查看更多关于CSS3新增文本属性详述_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111076

更新时间：2022-11-17 阅读：36次