css3 文本记
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 文本记的更多相关文章
- 第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...
- Cool！15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
- CSS3文本温故
1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...
- HTML 学习笔记 CSS3 (文本效果)
text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
- CSS3 文本装饰
浏览器对CSS3文本特性的支持情况,如下表所示: 浏览器 text-shadow text-overflow word-wrap hyphens Opera 9.5+ 9+.带前缀-o- 10.5+ ...
- 第七十八节，CSS3文本效果
CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow Opera ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
随机推荐
- [iOS微博项目 - 2.0] - OAuth授权3步
A.概念 OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用 ...
- UITableView section header 不固定
iOS系统自带的UITableView,当数据分为多个section的时候,在UITableView滑动的过程中,默认section header是固定在顶部的,滑动到下一个section的时候,下一 ...
- 用Emacs 写python了
之前都是用python 自带的IDLE 写 python 的,现在换了Emacs,感觉真是不错,爽. 截图留念: 用了sr-speedbar ,顿时有了IDE 的感觉,是不是很爽. 版权声明:本文为博 ...
- MongoDB 快速入门--中级
索引 ensureIndex 用来创建索引,需要注意的就是一个集合最多也就64个索引 如果没加所有就是表扫表,速度很慢, 当然如果索引的键有多个,就必须考虑顺序 拓展索引 同样的也可以为内嵌文档 建立 ...
- SQL将本地图片文件插入到数据库
GO RECONFIGURE GO GO RECONFIGURE GO --生成格式化文件 在此基础上再进行编辑,自己创建一个格式化文件有点问题 --10.0 -- --1 SQLBINARY 0 0 ...
- 配置iSCSI多路径
1.添加MPIO功能,完成后打开MPIO进行配置,添加对iSCSI多路径的支持,如下图表示已经添加完成后灰色不可选,再打开 MPIO设备 标签页可以看到已安装完成的MPIO所支持的设备:
- 微设计（www.weidesigner.com）介绍系列文章(一)
1.1 什么是微设计? 微设计(www.weidesigner.com)是一个专门针对微信公众账号提供营销推广服务而打造的第三方平台.主要功能是针对微信商家公众号提供与众不同的.有针对性的营销推广服务 ...
- Html+jquery mobile
打开VS 2013,选择[文件]-[新建]-[项目] 选择框架为.NET Framework4-[ASP.NET MVC4 Web应用程序],点击[确定] 选择[基本],点击[确定] 创建的MVC的项 ...
- AlertView with password
1. setAlertViewStyle:UIAlertViewStyleSecureTextInput UIAlertView *alertView = [[UIAlertView alloc] i ...
- C#操作Word （1）Word对象模型
Word对象模型 (.Net Perspective) 本文主要针对在Visual Studio中使用C# 开发关于Word的应用程序 来源:Understandingthe Word Object ...