网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网站建设 >> CSS教程 >> 正文
最新文章
· CSS控制UL、LI 的样式详解
· CSS定义页面背景图片的位置
· Div+CSS布局的扩展技巧和用法24则
· 用css中控制图片的缩放,并加入指定链
· 纯CSS实现三列DIV等高布局
· 有利于SEO的DIV+CSS的命名规则
· 十天学会DIV+CSS(WEB标准)CHM格式文件
· 用CSS给div设置滚动条
· CSS实现图片按比例自动缩放
· CSS鼠标形状样式
热门文章
 用JS改变元素的CSS样式
 CSS实现全自动单元格,超出内容出现
 div设置左浮动float:left;时左边距
 CSS定义链接颜色
 用CSS给div设置滚动条
 如何使用ul和li来制作垂直导航条
 去掉超链接单击时的边框
 CSS实现图片按比例自动缩放
 当文字过多时显示省略号...
 解决IE6下的行高line-height失效问
相关文章
没有相关文章
标题列表的截取和样式定义
来源:百度空间 更新时间:2010/8/3 23:26:19 阅读次数:
字体:[ ] 我要投稿

很多网站的主页上都有标题列表,当标题长度过长时,截取一定的长度,超过长度的部分一般用省略号显示。我发现有很多开发人员都是在后台做处理,其实不用那么麻烦,页面中用css控制就可以!

<div style="width:225px;text-overflow:ellipsis;overflow: hidden;">   
asdfl;kasjdf;kasjdflkasdjfsdfasdlkjfa;lsdkfjas;ldkjfls;kdf   
asdfl;kasjdf;kasjdflkasdjfsdfasdlkjfa;lsdkfjas;ldkjfls;kdf   
asdfl;kasjdf;kasjdflkasdjfsdfasdlkjfa;lsdkfjas;ldkjfls;kd   
</div>

关键的属性是:text-overflowoverflow

text-overflow : clip | ellipsis

参数:
clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)
说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

overflow : visible | auto | hidden | scroll

参数:
visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条
说明:检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。设置textarea对象为hidden值将隐藏其滚动条。对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。自IE5开始,此属性在MAC平台上可用。

当然这只是一个示例,大多数的列表显示还是经常用ul标签嵌套li标签来实现。

Java代码

<ul id=txt style="line-height:18px;display: list-item; list-style-position: inside;list-style-type:upper-roman; margin-left:0px;">   
<li>这是一个名字叫小强的列表项目。他难道不是很可爱吗?</li>   
<li>这是一个名字叫小强的列表项目。他难道不是很可爱吗?</li>   
<li>这是一个名字叫小强的列表项目。他难道不是很可爱吗?</li>   
</ul>

关键属性是:list-style-type

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

参数:
disc :  CSS1 实心圆
circle :  CSS1 空心圆
square :  CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman :  CSS1 大写罗马数字
lower-alpha :  CSS1 小写英文字母
upper-alpha :  CSS1 大写英文字母
none :  CSS1 不使用项目符号
armenian :  CSS2 传统的亚美尼亚数字
cjk-ideographic :  CSS2 浅白的表意数字
georgian :  CSS2 传统的乔治数字
lower-greek :  CSS2 基本的希腊小写字母
hebrew :  CSS2 传统的希伯莱数字
hiragana :  CSS2 日文平假名字符
hiragana-iroha :  CSS2 日文平假名序号
katakana :  CSS2 日文片假名字符
katakana-iroha :  CSS2 日文片假名序号
lower-latin :  CSS2 小写拉丁字母
upper-latin :  CSS2 大写拉丁字母
说明:设置或检索对象的列表项所使用的预设标记。
若list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用。仅作用于具有display值等于list-item的对象(如li对象)。
注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号