浏览 6046 次
锁定老帖子 主题:标题列表的截取和样式定义
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-05-22
示例代码: <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-overflow和overflow: 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标签来实现。 标题列表也可以用css实现多种显示格式: 例如: <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对象)指明列表属性。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2008-06-02
只可惜text-overflow 只有IE支持。似乎有可能在CSS3成为标准。http://www.css3.info/preview/text-overflow/
|
|
返回顶楼 | |
发表时间:2008-06-04
IE Only....路还很远。。。
list-style-type也最好不要用默认的 各浏览器的表现一致 而且看着选择很多 实际上能用的就那么几个 |
|
返回顶楼 | |
发表时间:2008-08-09
好像效果不和你一样啊。
|
|
返回顶楼 | |