CSS3之文本
2018-05-10 本文已影响1人
LemonnYan
一、文本简介
复合属性font：font:font-style font-weight/line-height font-family
二、CSS3文本阴影属性
text-shadow属性的语法及参数
语法：text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y-offseet) 模糊半径(blur-radius)
参数值说明：
- color：阴影颜色，定义绘制阴影时所使用的颜色，可以放在第一也可以放在最后。
- x-offset：X轴位移，指定阴影水平位移量，可以取正负值。取正值，阴影在对象的右边；取负值，阴影在对象的左边。
- y-offset：Y轴位移，指定阴影垂直方向偏移量，可以取正负值。取正值，阴影在对象的底部；取负值，阴影在对象的顶部。
- blur-radius：阴影模糊半径，代表阴影向外模糊的范围。只能取正值，值为0时，表示不具有模糊效果。
示例代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css测试</title>
<style>
body{
background-color:#665757;
}
.text-wrap{
width:600px;
margin:10px auto;
padding:10px 0;
border:5px solid #ccc;
position: relative;
box-shadow: 0 0 4px rgba(0,0,0,0.80);
clear:both;
font-family: 'Airal',serif;
font-size:50px;
text-align:center;
color:#f7edf7;
}
.box1{
text-shadow: 0px 0px 0 rgb(188,178,188),1px 0px 0 rgb(173,163,173),
2px 0px 0 rgb(157,147,157),3px 0px 0 rgb(142,132,142),
6px 0px 0 rgb(126,116,126),5px 0px 0 rgb(111,101,111),
6px 0px 0 rgb(95,85,95),7px 0px 0 rgb(79,69,79),
8px 0px 7px rgba(0,0,0,0.35),8px 0px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box2{
text-shadow: 0px 0px 0 rgb(188,178,188),1px -1px 0 rgb(173,163,173),
2px -2px 0 rgb(157,147,157),3px -3px 0 rgb(142,132,142),
6px -4px 0 rgb(126,116,126),5px -5px 0 rgb(111,101,111),
6px -6px 0 rgb(95,85,95),7px -7px 0 rgb(79,69,79),
8px -8px 7px rgba(0,0,0,0.35),8px -8px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box3{
text-shadow: 0px 0px 0 rgb(188,178,188),0px -1px 0 rgb(173,163,173),
0px -2px 0 rgb(157,147,157),0px -3px 0 rgb(142,132,142),
0px -4px 0 rgb(126,116,126),0px -5px 0 rgb(111,101,111),
0px -6px 0 rgb(95,85,95),0px -7px 0 rgb(79,69,79),
0px -8px 7px rgba(0,0,0,0.35),0px -8px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box4{
text-shadow: 0px 0px 0 rgb(188,178,188),-1px -1px 0 rgb(173,163,173),
-2px -2px 0 rgb(157,147,157),-3px -3px 0 rgb(142,132,142),
-6px -4px 0 rgb(126,116,126),-5px -5px 0 rgb(111,101,111),
-6px -6px 0 rgb(95,85,95),7px -7px 0 rgb(79,69,79),
-8px -8px 7px rgba(0,0,0,0.35),-8px -8px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box5{
text-shadow: 0px 0px 0 rgb(188,178,188),-1px 0px 0 rgb(173,163,173),
-2px 0px 0 rgb(157,147,157),-3px 0px 0 rgb(142,132,142),
-6px 0px 0 rgb(126,116,126),-5px 0px 0 rgb(111,101,111),
-6px 0px 0 rgb(95,85,95),-7px 0px 0 rgb(79,69,79),
-8px 0px 7px rgba(0,0,0,0.35),-8px 0px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box6{
text-shadow: 0px 0px 0 rgb(188,178,188),-1px 1px 0 rgb(173,163,173),
-2px 2px 0 rgb(157,147,157),-3px 3px 0 rgb(142,132,142),
-6px 4px 0 rgb(126,116,126),-5px 5px 0 rgb(111,101,111),
-6px 6px 0 rgb(95,85,95),-7px 7px 0 rgb(79,69,79),
-8px 8px 7px rgba(0,0,0,0.35),-8px 8px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box7{
text-shadow: 0px 0px 0 rgb(188,178,188),0px 1px 0 rgb(173,163,173),
0px 2px 0 rgb(157,147,157),0px 3px 0 rgb(142,132,142),
0px 4px 0 rgb(126,116,126),0px 5px 0 rgb(111,101,111),
0px 6px 0 rgb(95,85,95),0px 7px 0 rgb(79,69,79),
0px 8px 7px rgba(0,0,0,0.35),0px 8px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box8{
text-shadow: 0px 0px 0 rgb(188,178,188),1px 1px 0 rgb(173,163,173),
2px 2px 0 rgb(157,147,157),3px 3px 0 rgb(142,132,142),
4px 4px 0 rgb(126,116,126),5px 5px 0 rgb(111,101,111),
6px 6px 0 rgb(95,85,95),0px 7px 0 rgb(79,69,79),
8px 8px 7px rgba(0,0,0,0.35),8px 8px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
.box9{
text-shadow: 0px 0px 0 rgb(188,178,188),1px 0px 0 rgb(173,163,173),
2px 0px 0 rgb(157,147,157),3px 0px 0 rgb(142,132,142),
4px 0px 0 rgb(126,116,126),5px 0px 0 rgb(111,101,111),
6px 0px 0 rgb(95,85,95),0px 7px 0 rgb(79,69,79),
8px 0px 7px rgba(0,0,0,0.35),8px 0px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="text-wrap box1">测试1</div>
<div class="text-wrap box2">测试2</div>
<div class="text-wrap box3">测试3</div>
<div class="text-wrap box4">测试4</div>
<div class="text-wrap box5">测试5</div>
<div class="text-wrap box6">测试6</div>
<div class="text-wrap box7">测试7</div>
<div class="text-wrap box8">测试8</div>
<div class="text-wrap box9">测试9</div>
</body>
</html>
示例效果图：
三、CSS3溢出文本属性
语法：text-overflow:clip|ellipsis
属性值说明：
- clip：不显示省略标记（...），只是简单的裁切；
- ellipsis：文本溢出时显示省略号（...），省略标记插入的位置是最后一个字符。
text-overflow属性仅用于决定文本溢出时是否显示省略标记，并不具备样式定义的功能。要实现文本溢出时裁切显示省略标记效果，还需要两个属性的配合，强制文本在一行显示white-space:nowrap和溢出内容隐藏overflow:hidden，并且需要定义容器的宽度。
四、css3文本换行
1、word-wrap属性
使用word-wrap属性实现长单词与URL地址的自动换行。
语法：word-wrap:normal|break-word
属性值说明：
- normal：默认值，浏览器只在半角空格或连字符的地方进行换行；
- break-word：将内容在边界内换行（不截断英文单词换行）
注意：word-wrap用在<pre>和<table>中是没有效果的。
2、word-break属性
word-break属性用来设置对象内文本的字内换行行为，在出现多种语言的情况下尤为有用。
语法：word-break:normal|break-all|keep-all
属性值说明：
- normal：默认值，根据语言自己的规则确定换行的方式，中文到边界换行，英文从整个单词换行。
- break-all：可以强行截断英文单词，达到词内换行。
- keep-all：不允许字断开。
提示：word-break取值为keep-all时，中文在不同的浏览器下显示风格各异，但英文都是一致的，长文本会撑破容器溢出显示。
3、white-space属性
white-space属性主要用来声明建立布局过程中如何处理元素中的空白符。
语法：white-space:normal || pre || nowrap || pre-line || pre-wrap || inherit
属性值说明：
- normal：默认值，空白处会被浏览器忽略。
- pre：保留输入的文本格式，类似于
HTML中的<pre>标签效果。 - nowrap：文本不会换行，文本会在 同一行上，直到碰到换行标签
<br/>为止。 - pre-line：合并空白符序列，但保留换行符。
- pre-wrap：保留空白符序列，正常进行换行。
- inherit：继承父元素的white-space属性值。所有的浏览器都不支持该属性值。
4、文本换行技巧
-
pre标签自动换行
pre{
white-space: pre; /* Css 2.0*/
white-space: pre-wrap; /*Css 2.1*/
white-space: pre-line; /* Css 3.0*/
white-space: -pre-wrap; /*Opera4-6*/
white-space: -o-pre-wrap; /* Opera 7*/
white-space: -moz-pre-wrap !important; /* Mozilla*/
word-wrap: break-word; /*IE 5+*/
}
-
单元格
td自动换行
table{
table-layout: fixed;
width:*** px;
}
table td{
overflow: hidden;
word-wrap: break-word;
}
-
除
pre、td标签外其它标签的自动换行
element{
overflow: hidden;
word-wrap: break-word;
}
-
标签内容强制不换行
element{
white-space: nowrap;
word-break: keep-all;
}
