CSS3文本属性
1.文字阴影text-shadow属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
font-size: 60px;
color: #fff;
text-shadow: -5px 0 #333, /*向左阴影*/
0 -5px #333, /*向上阴影*/
5px 0 #333, /*向右阴影*/
0 5px #333;/*向下阴影*/
}
</style>
</head>
<body>
<div>文字阴影</div>
</body>
</html>
2.盒子阴影box-shadow属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
background-color: red;
box-shadow: 10px 10px 5px #333333;
}
</style>
</head>
<body>
<div>盒子阴影</div>
</body>
</html>
3.文本溢出text-overflow属性
语法：text-overflow:取值;
ellipsis 当对象内文本溢出时显示省略标记（…）
clip 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</body>
</html>
4.强制换行word-wrap属性
Normal默认值。
Break-word在长单词或url地址进行换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<div>My Heart Will Go On Every night in my dreams I see you, I feel you, That is how I know you go onFar across the
distance And spaces between us You have come to show you go on Near, far, wherever you are I believe that the
heart does go on
</div>
</body>
</html>
5.文本自动换行：word-break
normal：靠浏览器的默认规则进行换行。（浏览器换行规则）
keep-all：只能在半角空格或连字符处换行。
break-all：设置允许在单词中间换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.test1 {
width: 300px;
height: 200px;
border: 1px solid #333333;
word-break: keep-all;
}
.test2 {
width: 300px;
height: 200px;
border: 1px solid #333333;
word-break: break-all;
}
</style>
</head>
<body>
<div class="test1">My Heart Will Go On Every night in my dreams I see you, I feel you, That is how I know you go
onFar across the
distance And spaces between us You have come to show you go on Near, far, wherever you are I believe that the
heart does go on
</div>
<div class="test2">My Heart Will Go On Every night in my dreams I see you, I feel you, That is how I know you go
onFar across the
distance And spaces between us You have come to show you go on Near, far, wherever you are I believe that the
heart does go on
</div>
</body>
</html>
