您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
css3中的文本属性-溢出,文本流,阴影,描边与填充,tab长度,边界
发布时间：2015-06-17 07:33:30编辑：雪饮阅读（）
text-overflow（文本溢出处理-省略号）
<!doctype html>
<html>
<head>
<style>
p{width:100px;
overflow:hidden;
/*溢出隐藏（这里则是按宽度溢出）*/
white-space:nowrap;
/*溢出禁止换行*/
text-overflow:ellipsis
/*溢出部分用省略号代替，没有该属性时默认是切割超出部分的属性（clip）*/
}
</style>
</head>
<body>
<p>雪饮个人博客，一个不甘于平庸的程序员的个人博客网站！</p>
</body>
</html>
预览图：
文本流与对其方式（start，end）
<!DOCTYPE HTML>
<html>
<head>
<style>
p{ text-align:start;
border:1px solid red;
direction:rtl;/*将文档流变成从右向左书写*/
unicode-bidi:bidi-override;
/*用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用*/
}
</style>
</head>
<body>
<p>看看雪饮个人博客在哪里，左边还是右边还是中间捏？</p>
<!--
在从左向右书写的文字中，左是开始,右是结束(汉语、英语)
left=start right=end
在从右向左书写的文字中，右是开始,左是结束(维语)
left=end right=start
--->
</body>
</html>
预览图：
text-shadow文本阴影
<!doctype html>
<html>
<head>
<style>
p{ color:red;
font-size:40px;
text-shadow:
3px 3px 3px rgba(0,255,0,0.5),
6px 6px rgba(0,0,255,0.5),
9px 9px #f90
;
/*
共做了3重阴影
第一行阴影代码：
水平移动方向
垂直移动方向
[模糊程度(长度)] 可以省略
[阴影颜色] 可以省略
第二行阴影代码：
水平移动方向
垂直移动方向
[阴影颜色] 可以省略
第三行阴影代码：
水平移动方向
垂直移动方向
[阴影颜色] 可以省略
*/
}
</style>
</head>
<body>
<p>我是一个正直的人，又正又值。</p>
</body>
</html>
预览图：
word-wrap单词边界处理（对于一个单词溢出父容器边界的处理）
<!doctype html>
<html>
<head>
<style>
p{width:90px;border:1px solid red;word-wrap:break-word}
/*word-wrap属性对于一个单词若超过父容器的部分进行破坏使其换到下一行，默认是不做处理的，在对于单词的判断中，任何连续的没有空白符的持续字母为一个单词，所以如果有空白符时该属性无效
*/
</style>
</head>
<body>
<p>howareyouhowoldareyou?</p>
</body>
</html>
预览图：
text-fill-color& text-stroke文本的填充颜色与文本描边
<!doctype html>
<html>
<head>
<style>
p{
font-size:100px;
/*浏览器私有前缀属性*/
-webkit-text-fill-color:red;
-webkit-text-stroke:2px green;
/*W3C标准*/
text-fill-color:red;
text-stroke:2px green;
/*私有前缀
IE：-ms-
谷歌、苹果、猎豹、360急速(webkit内核):-webkit-
opera:-o-
firefox:-moz- 更正:火狐浏览器的内核为Gecko 但是似有前缀是-moz-
*/
}
</style>
</head>
<body>
<p>雪饮个人博客欢乐多。</p>
</body>
</html>
预览图：
tab-size（tab键在html中的空白字符处理）
<!doctype html>
<html>
<head>
<style>
p{tab-size:30}
/*支持倍数方式*/
/*p{tab-size:800px;}谷歌浏览器暂不支持长度定义*/
</style>
</head>
<body>
<pre>
<p> tab 键长度测试</p>
</pre>
<!--
HTML在处理不可见字符的时候，通常忽略或者变成一个英文字符空格
在开头或者结尾:忽略掉所有空白字符
在字符中间：把连续的所有空白变成一个英文的空格
将标签嵌套于pre标签中将不会对被嵌套标签内部的tab、换行做空白字符的处理
-->
</body>
</html>
预览图：
关键字词：css3,文本属性,个人博客
下一篇：css3的颜色模式