CSS段落样式

 

CSS字体与段落设计 段落样式： 段落样式的相关属性 line-height（行高） letter-spacing（设置对象中文字的间距） word-spacing（设置对象中单词的间距） text-indent （设置对象中首行文字的缩进值） text-overflow （当对象中文本超过行宽时，可以对文本末端增加省略标记（…）只有当对象设为不换行显示时有效，属性值为clip(直接截取超出的文字)ellipsis(添加省略号)） vertical-align （设置对象之中内容的垂直对齐方式，属性值有auto,baseline,sub,super,top,text-top,middle,bottom,text-bottom） Text-align (设置对象中文本的对齐方式，属性值有left,right,center,justify) layout-flow (对象中文本的排版方式横向或纵向，属性值有horizontal,vertical-ideographic) word-break (设置对象内文本的换行方式，break-all以字母或字为单位换行，keep-all以单词或标点空格换行)white-space(设置对象内空格字符的处理方式，normal，pre（不忽略源代码中的空格），nowrap(文字不自动换行，除非遇到br标签)，inherit ) word-warp（使用break-all时当内容超出其容器的边界时发生换行。属性值有normal,break-word） 应用： 1.文本换行      Text-overflow:ellipsis;word-break:keep-all;联合使用可以讲超出行宽的内容用省略号代替，也可用使用overflow:hidden;用于设置当对象中的内容超过对象显示范围时，对象本身的设置，属性值有visible,auto,hidden,scroll 2.强制换行：word-break:break-all;word-wrap; 3.对齐与段落缩进      缩进，关键是相对单位em，1em=该行文字的大小，这样设置，可以使得首字母永远缩进两个字符的位置，浏览器大小改变，使得层改变时不至于破坏其结构。 p { line-height:150%; text-align:right; text-indent:2em; word-spacing:2px; vertical-align:top; }      此次用了一个伪元素：first-letter用于设置首字下沉效果，原理是让其大小为两个字符大小，同时设置其浮动方式，使得前两行文字于其右边环绕。不过经测试，只有部分浏览器支持，IE提供支持。 p ：first-letter { font-size:2em; float:left; }