CSS段落样式 - teetotal - 我的博客

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;

}