超过指定长度的文字用省略号表示

开发中经常会遇到的新闻列表中某个新闻标题过长，这种情况可以向其添加一组CSS规则，使其隐藏超出框的字符，并在末尾显示省略号。

样式:

<style type="text/css">
.fixlength {
border:1px solid black;
display:block;
width:700px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>

解释：

white-space属性设置如何处理元素内的空白

white-space:nowrap;表示文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。

overflow:hidden;超出部分隐藏。

text-overflow属性规定当文本溢出包含元素时发生的事情。

值	描述
clip	修剪文本
ellipsis   [ɪˈlɪpsɪs]	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本

最好加上鼠标悬停文字上显示出包括隐藏部分的文字的效果，代码如下：

.fixlength:hover{
	overflow:visible;
}

效果如下图所示：

参考：http://www.cnblogs.com/super_x/archive/2008/11/15/1334291.html

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>