CSS文本段落设置示例代码

发布时间:2019-08-03编辑:脚本学堂
本文介绍下,使用css代码设置文本段落样式的方法,学习下与段落样式相关的一些属性(line-height、letter-spacing、text-indent等)的用法,感兴趣的朋友参考下。

本节内容:
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)

2,段落样式应用示例

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;
}