标题列表的截取和样式定义

很多网站的主页上都有标题列表，当标题长度过长时，截取一定的长度，超过长度的部分一般用省略号显示。我发现有很多开发人员都是在后台做处理，其实不用那么麻烦，页面中用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-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对象）指明列表属性。

评论

3 楼 ts88 2008-08-09  

好像效果不和你一样啊。

2 楼 zcfg 2008-06-04  

IE Only....路还很远。。。

list-style-type也最好不要用默认的 各浏览器的表现一致 而且看着选择很多 实际上能用的就那么几个

1 楼 web20 2008-06-02  

只可惜text-overflow 只有IE支持。似乎有可能在CSS3成为标准。http://www.css3.info/preview/text-overflow/