您的位置：首页 > Web前端 > CSS

CSS3——文本、段落

2016-01-06 10:07 549 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本属性</title>
</head>
<body>


<h1>1.阴影文本text-shadow</h1>
<!-- em是相对长度单位,如果默认字体大小是16px，则该样式1em=16px -->
<p style="text-shadow: 0.1em 2px 6px blue; font-size: 30px">
text-shadow: length length opacity color<br />
四个属性值：1.水平位移(正负)、2.垂直位移(正负)、3.模糊半径(可选)、4.颜色(可选)
</p>




<h1>2.溢出文本text-overflow</h1>
<div style="text-overflow: clip; overflow: hidden; white-space: nowrap; width: 220px; background: #cccccc;">
属性值为clip，这里直接被裁切了啊啊啊啊啊！！！
</div>
<div style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 220px; background: #cccccc;">
属性值为ellipsis，显示省略标记
</div>




<h1>3.控制换行word-wrap</h1>
<div style="width:300px;word-wrap:normal;border:1px solid #cccccc">
<h4>允许内容顶开指定的边界</h4>wordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrap
</div>
<div style="width:300px;word-wrap:break-word;border:1px solid #cccccc">
<h4>break-word不能控制断字符</h4>wordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrap
</div>
<div style="width:300px;word-wrap:break-word;border:1px solid #cccccc">
全是中文的情况全是中文的情况全是中文的情况全是中文的情况全是中文的情况
</div>
<div style="width:300px;word-wrap:break-word;border:1px solid #cccccc">
This is all English,This is all English,This is all English,This is all English
</div>




<h1>4.单词间隔word-spacing</h1>
<p style="word-spacing:normal">normal：This is a test</p>
<p style="word-spacing:-3px">-3px：This is a test</p>
<p style="word-spacing:15px">15px：This is a test</p>
<p style="word-spacing:50px">50px：有空格时才有效，所以不能用于设定中文之间的间隔</p>




<h1>5.字符间隔letter-spacing</h1>
<p style="letter-spacing:normal">normal：This is a test</p>
<p style="letter-spacing:15px">15px：This is a test</p>
<p style="letter-spacing:-1px">-1px：This is a test</p>
<p style="letter-spacing:normal">normal：中文也适用</p>
<p style="letter-spacing:15px">15px：中文也适用</p>
<p style="letter-spacing:-1px">-1px：中文也适用</p>




<h1>6.文字修饰text-decoration</h1>
<p style="text-decoration:none">无任何修饰none</p>
<p style="text-decoration:underline">下划线underline</p>
<p style="text-decoration:overline">上划线overline</p>
<p style="text-decoration:line-through">删除线line-through</p>
<p style="text-decoration:blink">闪烁blink(只有少数浏览器支持)</p>




<h1>7.垂直对齐方式vertical-align</h1>
<h3>默认
<span style="font-size:8pt;vertical-align:baseline">baseline</span>
</h3>
<h3>垂直对齐文本的下标
<span style="font-size:8pt;vertical-align:sub">sub</span>
</h3>
<h3>垂直对齐文本的上标
<span style="font-size:8pt;vertical-align:super">super</span>
</h3>
<h3>元素顶端与行中最高元素顶端对齐
<span style="font-size:8pt;vertical-align:top">top</span>
</h3>
<h3>元素顶端与行中最低元素顶端对齐
<span style="font-size:8pt;vertical-align:bottom">bottom</span>
</h3>
<h3>元素放置在父元素的中部
<span style="font-size:8pt;vertical-align:middle">middle</span>
</h3>
<h3>元素顶端与父元素字体的顶端对齐
<span style="font-size:8pt;vertical-align:text-top">text-top</span>
</h3>
<h3>元素底端与父元素字体的底端对齐
<span style="font-size:8pt;vertical-align:text-bottom">text-bottom</span>
</h3>
<h3>设置元素的堆叠顺序
<span style="font-size:8pt;vertical-align:10px">10px</span>
<span style="font-size:8pt;vertical-align:-10px">-10px</span>
</h3>
<h3>使用"line-height"属性的百分比值来排列次元素。允许负值
<span style="font-size:8pt;vertical-align:100%">100%</span>
<span style="font-size:8pt;vertical-align:-100%">-100%</span>
</h3>




<h1>8.水平对齐方式text-align</h1>
<p style="text-align:start">start</p>
<p style="text-align:end">end</p>
<p style="text-align:left">left</p>
<p style="text-align:right">right</p>
<p style="text-align:center">center</p>
<p style="text-align:justify">justify两端对齐，文本行的左右两端都放在父元素的内边界上</p>




<h1>9.文本转换text-transform</h1>
<p style="text-transform:capitalize">This is a test(首字母大写capitalize)</p>
<p style="text-transform:uppercase">This Is A Test(uppercase)</p>
<p style="text-transform:lowercase">This is a test(lowercase)</p>




<h1>10.文本缩进text-indent</h1>
<p style="text-indent:10px">缩进10px(允许负值)</p>
<p style="text-indent:-10pt">缩进-10pt</p>
<p style="text-indent:10mm">缩进10mm</p>
<p style="text-indent:10%">缩进10%</p>




<h1>11.文本行高line-height</h1>
<p style="background-color:#ccc">未设置行高</p>
<p style="line-height:50px;background-color:#ccc">行高50px</p>
<p style="line-height:100%;background-color:#ccc">行高100%，百分比取决于字体高度</p>




<h1>12.处理空白white-space</h1>
<p style="white-space:normal">默认              normal</p>
<p style="white-space:pre">保留空白              pre</p>
<p style="white-space:nowrap">文本不会换行,文本不会换行,文本不会换行,文本不会换行,文本不会换行,
文本不会换行,文本不会换行,文本不会换行,文本不会换行,文本不会换行,文本不会换行,文本不会换行,
文本不会换行,文本不会换行,文本不会换行,直到遇到<br/>为止 nowrap</p>
<p style="white-space:pre-warp;text-indent:10mm">
pre-wrap保留空白符序列，正常地进行换行，这里首行缩进10mm被保留了</p>
<p style="white-space:pre-line;text-indent:10mm">
pre-line合并空白符序列，正常地进行换行，这里首行缩进10mm被合并了</p>




<h1>13.文本反排unicode-bidi和direction</h1>
<p style="unicode-bidi:bidi-override;direction:rtl;text-align:left">倒过来念的是猪</p>




</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  CSS3 文本段落
相关文章推荐
新的分享
章节导航