用CSS让文字在一行内显示不换行的方法：
一般的文字截断(适用于内联与块)：
.text-overflow{
display:block /*内联对象需加*/
width:31em
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /*溢出时显示省略标记...；需与overflow:hidden一起使用*/
}
对于表格，定义有点不一样：
table{
width:30em
table-layout:fixed /*只有定义了表格的布局算法为fixed，下面td的定义才能起作用*/
}
td{
width:100%
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /* 溢出时显示省略标记...；需与overflow:hidden一起使用*/
}
注：这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有"..."，其它的浏览器文本超出指定宽度时会隐藏。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
用php或者其他的截取吧，css好像只可以隐藏多余的
function
msubstr($str,$start,$len){
for($i=0$i<$start+$len$i++){
$tmpstr=(ord($str[$i])>=161
&&
ord($str[$i])<=247&&
ord($str[$i+1])>=161
&&
ord($str[$i+1])<=254)?$str[$i].$str[++$i]:$tmpstr=$str[$i]
if
($i>=$start&&$i<($start+$len))$tmp
.=$tmpstr
}
return
$tmp
}
这个是php截取类
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>css写省略号方法</title>
<style>
/* CSS DEMO */
* { margin: 0padding: 0}
a { text-decoration: nonecolor: #000}
a:hover { text-decoration: nonecolor: #000}
ul {
width: 300px
margin: 40px auto
padding: 12px 4px 12px 24px
border: 1px solid #D4D4D4
background: #F1F1F1
}
li { margin: 12px 0}
li a {
display: block
width: 220px
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
}
/* firefox only */
li:not(p) {
clear: both
}
li:not(p) a {
max-width: 170px
float: left
}
li:not(p):after {
content: "..."
float: left
width: 25px
padding-left: 5px
color: #000
}
/* XHTML DEMO*/
</style>
</head>
<body>
<ul>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
<li><a href="#">敬请期待！</a></li>
</ul>
</body>
</html>
