您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

CSS知识总结(六)

2026/1/23 17:59:59发布17次查看
css常用样式 4.段落样式1)行高
控制段落内每行高度
line-height : normal | length
例子 源代码:
/* css代码 */.normal{ line-height:normal;}.length{ line-height:30px;}
body> p class=normal>这是正常的行高br>这是正常的行高br>这是正常的行高p> p class=length>这是30px的行高br>这是30px的行高br>这是30px的行高p>body>
效果:
这是正常的行高
这是正常的行高
这是正常的行高
这是30px的行高
这是30px的行高
这是30px的行高
如果在一个元素中有一行文字,而行高等于元素的高度,那么这一行文字就会垂直居中。
*注意是一行文字,而且先要把浏览器原有的内外边距干掉。
例子 源代码:
/* css代码 */*{ margin:0; padding:0;}.box{ width:100px; height:100px; line-height:100px; border:1px solid #000;}
body> div class=box> p>这是一行文字p> div>body>
效果:
2)段落缩进
控制段落的首行缩进
text-indent : length
例子 源代码:
/* css代码 */.indent{ text-indent:2em;}
body> p class=normal>这里没有首行缩进p> p class=indent>这里首行缩进了2emp>body>
效果:
这里没有首行缩进
这里首行缩进了2em
3)段落对齐
控制段落对齐方式,不但是文本,对象中的其它inline或inline-block元素也能够被text-align进行对齐方式的设置。
text-align : left | right | center | justify
例子 源代码:
/* css代码 */.box2{ width:300px; border:1px solid #000;}.left{ text-align:left;}.center{ text-align:center;}.right{ text-align:right;}
body> div class=box2> p class=left>左对齐文本p> p class=center>居中对齐文本p> p class=right>右对齐文本p> div>body>
效果:
左对齐文本
居中对齐文本
右对齐文本
4)文字间距
控制段落的文字间的距离
letter-spacing : normal | length
例子 源代码:
/* css代码 */.normal{ letter-spacing:normal;}.length{ letter-spacing:10px;}
body> p class=normal>这是默认的文字间距p> p class=length>这是10px的文字间距p>body>
效果:
这是默认的文字间距
这是10px的文字间距
5)文字溢出
控制文本内容溢出部分的样式
text-overflow : clip | ellipsis
clip : 当内联内容溢出块容器时,将溢出部分裁切掉。
ellipsis : 当内联内容溢出块容器时,将溢出部分替换为(...)。
因为text-overflow只是用来说明文字溢出时用什么方式显示,所以还需要定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),这样才能实现溢出文本被裁切或是显示省略号的效果。
 例子 源代码:
/* css代码 */.clip,.ellipsis{ width:150px; border:1px solid #000; white-space:nowrap; overflow:hidden;}.clip{ text-overflow:clip;}.ellipsis{ text-overflow:ellipsis;}.clip:hover,.ellipsis:hover{ text-overflow:inherit; overflow:visible;}
body> p>当你把光标移动到一下文本上,就能看到全部文本。p> div class=clip>这里使用的是text-overflow:clipdiv> div class=ellipsis>这里使用的是text-overflow:ellipsisdiv>body>
效果:
当你把光标移动到一下文本上,就能看到全部文本。
这里使用的是text-overflow:clip
这里使用的是text-overflow:ellipsis
6)段落换行
控制内容超过容器的边界时是否换行 (一般用于英文和url地址)
word-wrap : normal | break-word
normal : 允许内容顶开或溢出指定的容器边界。浏览器默认处理
break-word : 内容将在边界内换行。如果需要,单词内部允许换行。
例子 源代码:
/* css代码 */ .break{ width:300px; border:1px solid #000; word-wrap:break-word; }
body> div class=break>我的博客:http://www.cnblogs.com/mossbaoo/div>body>
效果:(url地址会另外换行)
我的博客:http://www.cnblogs.com/mossbaoo/
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product