注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Casa Baths N' shower

www.jacuzzi-bathtub.com

 
 
 

日志

 
 

CSS段落样式   

2009-09-25 17:00:50|  分类: 网站 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

CSS段落样式  - teetotal - 我的博客 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;

}

  评论这张
 
阅读(1037)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017