1.color&＃xff1a;设置文本颜色
不多说&＃xff0c;直接上代码
div { color:red;color:#FFFFFF;color:rgb(0,255,255);color:rgb(0,255,255,0.8);
}
2.direction&＃xff1a;设置文本方向
div { direction:rtl;direction:ltr;
}
3.line-height&＃xff1a;设置行高
div { line-height:50px;line-height:50%;line-height:0.5
}
4.letter-spacing&＃xff1a;设置字符间距
div { letter-spacing:-5px;letter-spacing:5px;
}
5.text-align&＃xff1a;对齐元素中的文本
div { text-align:top;text-align:center;text-align:bottom;
}
6.text-decoration&＃xff1a;向文本添加修饰
div { text-decoration:overline;text-decoration:line-through;text-decoration:underline;text-decoration:blink&＃xff1b;text-decoration:none;
}
7.text-indent&＃xff1a;缩进元素中文本的首行&＃xff08;默认值0&＃xff09;
.div{text-indent:1cm;text-indent:20%;
}
8.text-shadow&＃xff1a;设置文本阴影
语法格式&＃xff1a;text-shadow: X-Offset Y-Offset Blur Color
X-Offset表示阴影的水平偏移距离&＃xff0c;其值为正值时阴影向右偏移&＃xff0c;如果其值为负值时&＃xff0c;阴影向左偏移&＃xff1b;Y-Offset是指阴影的垂直偏移距离&＃xff0c;如果其值是正值时&＃xff0c;阴影向下偏移反之其值是负值时阴影向顶部偏移&＃xff1b;Blur是指阴影的模糊程度&＃xff0c;其值不能是负值&＃xff0c;如果值越大&＃xff0c;阴影越模糊&＃xff0c;反之阴影越清晰&＃xff0c;如果不需要阴影模糊可以将Blur值设置为0&＃xff1b;Color是指阴影的颜色&＃xff0c;其可以使用rgba色。著作权归作者所有。
原文: https://www.w3cplus.com/blog/52.html © w3cplus.com
听说IE9&＃xff0c;10都不支持text-shadow,但是我使用的IE11好像可以哟
https://www.w3cplus.com/blog/52.html
http://www.zhangxinxu.com/wordpress/?p&＃61;1613
不知道为什么这两位大神使用的滤镜都无法显示&＃xff0c;后面有空再研究
filter:glow(color&＃61;颜色,strength&＃61;数字);和filter:shadow(Color&＃61;颜色值,Direction&＃61;数值,Strength&＃61;数值)
9.text-transform&＃xff1a;控制元素中的字母
.p1{ text-transform:uppercase;text-transform:lowercase;text-transform:capitalize;
text-transform:capitalize;
}
其中capitalize代表文本中的每个单词以大写字母开头。
10.white-space&＃xff1a;设置元素中空白的处理方式
.p1{ white-space:normal;white-space:nowrap;white-space:pre;white-space:pre-wrap;white-space:pre-line;
}
| 值 | ||
| normal |
| |
| nowrap | 文本不会换行&＃xff0c;文本会在同一行上继续&＃xff0c;直到遇到 标签为止。 | |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 | |
| pre-wrap |
| |
| pre-line |
|
展示效果&＃xff1a;
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8">head><body>body<style>.div{ height:200px;width:200px;display:inline-block;border:2px solid red;}.box1{white-space:normal; }.box2{white-space:pre;}.box3{white-space:nowrap;}.box4{white-space:pre-wrap;}.box5{white-space:pre-line;}style><div class&＃61;"div box1">Nothingis impossibleto a willing heartdiv><div class&＃61;"div box2">Nothingis impossibleto a willing heartdiv><div class&＃61;"div box3">Nothingis impossibleto a willing heartdiv><div class&＃61;"div box4">Nothingis impossibleto a willing heartdiv><div class&＃61;"div box5">Nothingis impossibleto a willing heartdiv><script type&＃61;"text/Javascript"> script>body>
html>
11.word-spacing&＃xff1a;增加或减少单词间的空白
.box1{word-spacing:20px;;word-spacing:-20px;
}
12.text-justify&＃xff1a;规定当 text-align 被设置为 text-align 时的齐行方法
这个属性仅仅在IE浏览器中使用&＃xff0c;所以当用到的时候&＃xff0c;我会回来详细补充
附上张大神研究的地址&＃xff1a;http://www.zhangxinxu.com/wordpress/?p&＃61;1514
13.text-overflow:规定当文本溢出包含元素时发生的事情
http://www.zhangxinxu.com/wordpress/?p&＃61;230
说到文本溢出&＃xff0c;我们还要提到一个属性overflow:规定当内容溢出元素框时发生的事情
| 属性 | 值 | |
| visible |
| |
| hidden | 内容会被修剪&＃xff0c;并且其余内容是不可见的。 | |
| scroll | 内容会被修剪&＃xff0c;但是浏览器会显示滚动条以便查看其余的内容 | |
| auto | 如果内容被修剪&＃xff0c;则浏览器会显示滚动条以便查看其余的内容。 | |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
.div{ height:20px;width:150px;border:2px solid red;overflow:hidden; white-space:nowrap;
}
.box1{text-overflow:ellipsis;
}
.box2{text-overflow:clip;
}
.box3{text-overflow:"。。。";
}
效果如下&＃xff1a;
14.word-break&＃xff1a;规定自动换行的处理方法&＃xff08;断字的属性&＃xff09;
语法&＃xff1a;word-break: normal|break-all|keep-all;
normal&＃xff1a;使用浏览器默认的换行规则
break-all&＃xff1a;允许单词内换行
keep-all&＃xff1a;只能在半角空格或连字符处换行
.box1{word-break:normal;word-break:break-all;word-break:keep-all;
}
补充一点&＃xff1a;当 word-break:normal 时&＃xff0c;文字也是第三行的文字&＃xff0c;效果也是第三行的效果。
15.word-wrap&＃xff1a;属性允许长单词或 URL 地址换行到下一行&＃xff08;换行的属性&＃xff09;
normal&＃xff1a;只在允许的断字点换行&＃xff08;浏览器保持默认处理&＃xff09;
break-word&＃xff1a;在长单词或 URL 地址内部进行换行
京公网安备 11010802041100号