041_CSS3文本效果

1. text-overflow属性

1.1. text-overflow属性规定当文本溢出包含元素时发生的事情。

1.2. 默认值

1.3. 可能值

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html><head><title>文本溢出处理</title><meta charset="utf-8" /><style type="text/css">div {border: 1px solid #000000;width: 12em;white-space: nowrap; overflow: hidden; }</style></head><body><h3>下面两个div包含无法在框中容纳的长文本。正如您所见, 文本被修剪了。</h3><p>这个div使用"text-overflow: ellipsis":</p><div style="text-overflow: ellipsis;">This is some long text that will not fit in the box</div><p>这个div使用"text-overflow: clip":</p><div style="text-overflow: clip;">This is some long text that will not fit in the box</div></body>
</html>

1.4.2. 效果图

2. text-shadow属性

2.1. text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表, 每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

2.2. 规定水平阴影的位置、垂直阴影的位置、模糊距离, 以及阴影的颜色:

text-shadow: h-shadow v-shadow blur color;

2.3. 默认值

2.4. 可能值

2.5. 例子

2.5.1. 代码

<!DOCTYPE html>
<html><head><title>CSS3文本阴影</title><meta charset="utf-8" /><style type="text/css">span {font-size: 32px;text-shadow: 5px 5px 5px #FF0000;}p {font-size: 32px;text-shadow: 5px 5px 5px #FF0000, 5px 5px 5px #FFFF00;}</style></head><body><span>一个文本阴影</span><p>多个文本阴影</p></body>
</html>

2.5.2. 效果图

3. word-wrap属性

3.1. word-wrap属性允许长单词或URL地址换行到下一行。

3.2. 默认值

3.3. 可能值

3.4. 例子

3.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>CSS3 自动换行</title><style type="text/css">p {width: 11em; border: 1px solid #000000;}</style></head><body><p style="word-wrap: normal;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</p><p style="word-wrap: break-word;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p></body>
</html>

3.4.2. 效果图

041_CSS3文本效果相关推荐

css数字发光,每日CSS_发光文本效果
每日CSS_发光文本效果 2020_12_23 1. 代码解析 1.1 html 代码片段今天你开心吗在里面定义6个字, 分别用不同的 span 表示, 供单个使用 1.2 css 代码 ...
24个很酷的 CSS3 文本效果示例及教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.今天这篇文章收集了24个很棒的 CSS3 文本效果示例及教程分享给大家. Text wi ...
27.CSS3文本效果
第二十一章 CSS3文本效果 **************************************************** *查询适应的最低版本,可以去:"http://cani ...
Cool！15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
CSS3：CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
php 渐变色,段落每行渐变色文本效果
这次给大家带来段落每行渐变色文本效果,段落每行渐变色文本效果的注意事项有哪些,下面就是实战案例,一起来看一下. 今天小编在Codepen上看到一个CSS写的效果.一个段落的每行文本是渐变效果.对于单行 ...
html如何将设置文本效果,css如何对文本进行修饰
color属性:设置文本文字颜色.用法如下: color:颜色值; color属性可以设置的合法颜色值包括:16进制颜色值(例:#ffffff),rgb颜色值[例:rgb(0,0,0)],rgba颜色 ...

041_CSS3文本效果

041_CSS3文本效果相关推荐

最新文章

热门文章