css3中的文字效果

css3中的文字效果

今天先来学习：text-shadow,word-wrap,word-break text-overflow;四个属性；

1.text-shadow：h-shawo v-shadow blur color;

分别代表着：水平方向上的阴影位置,垂直方向上的位置，模糊距离，颜色；

实例一：

css：

.textInfo{height:100px;width:200px;font-size:18px;font-weight:bold;text-shadow:10px 10px 1px red;
}

效果：

2.word-wrap:normal||break-word;

参数分别代表：正常显示（长的英文单词不截断，是默认值）|| 把长单词强行截断

使英文长单词可以截断，分两行显示。所有浏览器都已经支持，在中文的不存在这样的问题，因为每个汉字就当作一个单词。

实例：

css：

.textInfo1{height:120px;width:100px;border:1px solid red;word-wrap:normal;float:left;margin-left:40px;
}
.textInfo2{height:120px;width:100px;border:1px solid red;word-wrap:break-word;float:left;margin-left:40px;
}

效果对比：

三：word-break:normal || break-all || keep-all;（规定非中日韩文本的换行规则）

参数解读：

normal:使用浏览器默认的换行规则；

break-all:不管什么字符都强制换行（允许在单词内换行）；

keep-all：只能在半角空格或连字符处换行；

四：text-overflow

当规定的文本溢出所包含的元素时：

css：

.demo{height:20px;width:100px;border:1px solid red;float:left;overflow:hidden; /*仅仅是hidden*/margin-left:40px;
}
.demo1{height:20px;width:100px;border:1px solid red;float:left;overflow:hidden;text-overflow:clip; /*剪切*/white-space:nowrap; /*规定段落文本不进行换行*/margin-left:40px;
}
.demo2{height:20px;width:100px;border:1px solid red;overflow:hidden;text-overflow:ellipsis;/*用省略号表示*/white-space:nowrap; /*规定段落文本不进行换行*/float:left;margin-left:40px;
}

效果：

顺便补充一下：white-space的用法；在demo的css样式中，操作溢出的文本是换行了滴，直接添加text-overflow是看不见效果的，必须添加

white-space才能看到效果的滴，

对比一下：

这里还有一个较为完整的实例：http://www.jb51.net/css/42578.html

转载于:https://www.cnblogs.com/mc67/p/5242601.html

css3中的文字效果相关推荐

html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
css3 文字横向渐变,CSS3实现渐变文字效果
本文主要和大家分享CSS3实现渐变文字效果,我们主要和大家分享两种方法,希望能帮助到大家. 一.方法一:借助mask-image属性方法一下的文字渐变效果相应的HTML代码如下: 天赐美妞与HT ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
css3中的渐变色效果
开发工具与关键技术:dw,html+css3 作者:邓伟征撰写时间:2019年1月18日渐变的含义:两种或多种颜色之间平滑过渡的效果渐变的属性和取值属性background-image 取值: ...
【小程序】手动实现switch开关中带文字效果（开关左右文字相同/不同都可以）
最终效果: 左右文字宽度相同左右文字宽度不同左右长度相同效果:配合wx:show切换注意:左右长度相同的话可以设置合适的相同的宽度. html: <view class="sw ...
css3中2D转换效果实现二（6）
CSS3 高斯模糊与动画效果
CSS3 高斯模糊与动画效果 1. 概述 2. 高斯模糊说明与语法 2.1 高斯模糊说明 2.2 blur 语法 3. 动画效果 3.1 @keyframes 语法 3.2 animation 语法 ...
photoshop多选文字_60多个Photoshop文字效果教程
从食物,草和水到复古,发光或哈利波特,在Photoshop中创建文字效果的可能性是无限的. 但是,作为图形设计师,您确实需要一些指导或灵感来设计创意文本效果–对于这种情况,在线教程是最佳的来源. 好吧 ...
好程序员web前端学习路线分享css3中的渐进增强和降级
好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器 ...
Pr剪辑上分攻略 -- 文字效果
Pr中添加文字效果的方式有很多,这里列举几个常用的(我所掌握的)方式. 输入文字在预览面板上,点击快捷键 T [英文输入法],或在时间轴面板上点击左边工具最下角的文字工具,即可在指定位置输入文字:如 ...

css3中的文字效果

css3中的文字效果相关推荐

最新文章

热门文章