css3 文本

　　在css文本功能上主要分为三大类：字体，颜色和文本。



text-shadow

　　设置文本阴影

text-shadow:color x-offset y-offset blur-radius

　　color:阴影颜色，可选。

　　x-offset:x轴偏移量，其值为正，阴影在右边，其值为负，阴影在左边。

　　y-offset:y轴偏移量，其值为正，阴影在下边，其值为负，阴影在上边。

　　blur-radius:阴影模糊半径，可选，代表阴影向外模糊的模糊范围。

　　还可以为文本指定多个阴影，中间使用逗号分隔。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

       text-shadow:2px 2px 1px red,

                   4px 4px 1px yellow,

                   6px 6px 1px blue,

                   8px 8px 1px black;

    }

</style>

</head>

<body>

	<div>胸无大志者，必受制于人</div>

</body>

</html>

text-overflow

　　设置文本溢出

text-overflow:clip | ellipsis

　　clip:文本溢出时剪切其内容。

　　ellipsis:文本溢出时显示省略号标记(...)。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

       width:100px;

       border:1px solid;

       text-overflow:clip;

    }

</style>

</head>

<body>

	<div>胸无大志者，必受制于人胸无大志者，必受制于人胸无大志者，必受制于人</div>

</body>

</html>

　　可以看出，单纯的设置文本溢出并没有任何效果，因为自动换行，盒子的高度被内容撑开了，所以我们强制文本不换行(white-space:nowrap)。并设置溢出属性为隐藏(overflow:hidden)。

div{

   width:100px;

   border:1px solid;

   text-overflow:clip;

   overflow:hidden;

   white-space:nowrap;

}

　　ellipsis效果

div{

   width:100px;

   border:1px solid;

   text-overflow:ellipsis;

   overflow:hidden;

   white-space:nowrap;

}

　　最后一个字符被替换成了省略号。

word-wrap

　　可以看出，浏览器没有制止URL地址换行，它强行溢出了盒子边框，使用word-wrap可以实现长单词与URL地址的自动换行。

word-wrap:normal | break-word

　　normal:默认值，浏览器只在半角空格或连字符的地方进行换行。

　　break-word:将内容在边界内换行。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

       width:100px;

       border:1px solid;

       word-wrap:break-word;

    }

</style>

</head>

<body>

	<div>http://www.baidu.com胸无大志者，必受制于人胸无大志者，必受制于人胸无大志者，必受制于人</div>

</body>

</html>

　　可见，URL地址在边框边缘处强制换行了。

word-break

　　使用word-break属性来决定自动换行的处理方法。通过具体的属性设置，不仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行。

word-break:normal | break-all | keep-all

　　word-break属性用于设置或检索对象内文本的字内换行行为，在出现多种语言的情况下尤其有用。

　　normal:默认值，使用浏览器默认的换行规则。

　　break-all:允许在单词内换行。

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

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

       width:100px;

       border:1px solid;

       word-break:normal;

    }

</style>

</head>

<body>

	<div>https://www.baidu.com胸无大志者，必受制于人胸无大志者，xixihahasuisuiniannian必受制于人胸无大志者，必受制于人</div>

</body>

</html>

　　默认情况，URL地址与长单词不会自动换行。

    div{

       width:100px;

       border:1px solid;

       word-break:break-all;

    }

　　当值为break-all时，与word-wrape的值为word-break的效果类似。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

       width:100px;

       border:1px solid;

       word-break:keep-all;

    }

</style>

</head>

<body>

	<div>https://www.baidu.com 胸无大志者，必受制于人 胸无大志者，必受制于人 胸无大志者，必受制于人</div>

</body>

</html>

　　当值为keep-all时，只在空格处实行换行。

white-space

　　用来处理元素中的空白符。

white-spcae:normal || pre || nowrap || pre-line || pre-wrap || inherit

　　normal:默认值,空白会被浏览器忽略。

　　pre:空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。

　　nowrap:文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。

　　pre-wrap:保留空白符序列，但是正常地进行换行。

　　pre-line:合并空白符序列，但是保留换行符。

　　inherit:规定应该从父元素继承 white-space 属性的值。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

       width:100px;

       border:1px solid;

       white-space:normal;

    }

</style>

</head>

<body>

<div>https://www.baidu.com

胸无大志者，必     受制

于人 胸无大志者，必受制    于人 胸无大志者，

必受制于人</div>

</body>

</html>

　　默认时(normal)，空白符合并，回车符忽略，自动换行。

div{

   width:100px;

   border:1px solid;

   white-space:pre;

}

　　当值为pre时，保留空白符与回车符，不自动换行。

div{

   width:100px;

   border:1px solid;

   white-space:pre-wrap;

}

　　当值为pre-wrap时，保留空白符与回车符，自动换行。

div{

   width:100px;

   border:1px solid;

   white-space:pre-line;

}

　　当值为pre-line时，空白符合并，回车符保留，自动换行。

css3文本完。然学习之路，却不止

css3 文本记的更多相关文章

  1. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

  2. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  3. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

  4. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  5. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  6. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  7. CSS3 文本装饰

    浏览器对CSS3文本特性的支持情况,如下表所示: 浏览器 text-shadow text-overflow word-wrap hyphens Opera 9.5+ 9+.带前缀-o- 10.5+ ...

  8. 第七十八节，CSS3文本效果

    CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

  9. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

随机推荐

  1. [转]directsound抓取麦克风PCM数据封装类

    网上有很多方法从麦克风读取PCM数据,不想一一举例.只是在这里发布一个我自己写的directsound的麦克风PCM数据采集类,通过它,可以很方便的利用directsound技术把麦克风的数据采集到, ...

  2. POJ 1860 Currency Exchange (SPFA松弛)

    题目链接:http://poj.org/problem?id=1860 题意是给你n种货币,下面m种交换的方式,拥有第s种货币V元.问你最后经过任意转换可不可能有升值.下面给你货币u和货币v,r1是u ...

  3. UVaLive 6855 Banks (水题，暴力)

    题意:给定 n 个数,让你求最少经过几次操作,把所有的数变成非负数,操作只有一种,变一个负数变成相反数,但是要把左右两边的数加上这个数. 析:由于看他们AC了,时间这么短,就暴力了一下,就AC了... ...

  4. 学习php 韩顺平 数据类型 三元运算，字符串运算类型运算

    数据类型 整型:int 4个字节长度 1个字节8个bit 所以最大的整型数值是2的31次方 第一位是的0,1 表示正负,0表示正数,1表示负数 小数(float)分 精度计算  从左边开始算第一个不为 ...

  5. RIA(富客户端)发展态势

    在过去的两到三年中,Web开发人员一直是想构建一种比传统HTML更丰富的客户端:这是一个用户接口,它比用HTML能实现的接口更加健壮.反应更加灵敏和更具有令人感兴趣的可视化特性.RIA技术的出现允许我 ...

  6. SQL 错误1418

    1.一个或多个服务器网络地址缺少完全限定域名(FQDN).为每个服务器指定FQDN,然后再次单击“开始镜像”.2.服务器网络地址"TCP://primary.test.com:5022&qu ...

  7. 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频

    - Scott Hanselman的中文博客[转载] [原文发表地址] Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Trai ...

  8. opennebula 自定义安装目录

    /bin//mkinstalldirs /usr/local/lib /bin//mkinstalldirs /usr/local/include /bin//mkinstalldirs /usr/l ...

  9. 【灵感】wifi通过wifi发送优惠信息

    1.[灵感]wifi通过wifi发送优惠信息 http://content.businessvalue.com.cn/post/15362.html 2.手机彩票大爆发 http://content. ...

  10. 【转】2013年中国IT业10大公司

    转自:http://www.chinaz.com/news/2013/1217/331446.shtml?zyy 1.最得志的公司:小米 在2013年,再没有一家公司像小米这样志得意满,即便看看所有的 ...