DIV下的解决方案:
<html>
<head>
<title>Style5.cn</title>
<style type="text/css">
/* 公共样式 */
body { font-size: 14px; font-family:"宋体"; }
a { color: Black; text-decoration: none; }
a:hover { color: Blue; }
/* 截取文字的盒子 */
.autocut {
width:200px;
border:1px solid #333;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="autocut">
<a href="http://www.style5.cn" title="TOP10热榜在图片上的半透明阴影效果">TOP10热榜在图片上的半透明阴影效果</a><br />
<a href="http://www.style5.cn" title="说说最近读的书：无懈可击的Web设计">说说最近读的书：无懈可击的Web设计</a><br />
</div>
</body>
</html>
上面的这种方案，在 IE7 和 Opera 中应该能够完美的体现出他的效果了。但是 Firefox 目前并不支持 CSS3 中的 text-overflow:ellipsis，所以这种方法还是有缺陷的，算是不完全版。
另外，在连接的 title 标签里加入完整的文章标题，这样想知道具体内容的浏览者就可以将鼠标放在连接上，看到完整的标题了。
解释一下起到关键作用的几行代码：
overflow:hidden;
/* 隐藏超出容器范围的文字 */
white-space:nowrap;
/* 强制文字将不自动换行 */
text-overflow:ellipsis;
/* 如果文字超出范围，将使用省略号标示出来 */
-o-text-overflow:ellipsis;
/* Opera 的私有属性，功能同上 */
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
/* 目前这段代码无效，为 Firefox 预留 */
-webkit-text-overflow: ellipsis;
TD下的解决方案(一):
1.只需要将表格宽度固定,然后在表格的Css定义中加入:table {
width:484px;
table-layout:fixed;
}2.然后在表格单元格的Css定义中加入:td {
overflow:hidden;
text-overflow:ellipsis;
}
TD下的解决方案(二):
解决了在IE7下，JS调整宽度后，TD下的解决方案(一)失效的问题。
<table width="200" border="1" style="table-layout:fixed;">
<tr>
<td width="80" style="width:80px;overflow: hidden;text-overflow:ellipsis">
<nobr>我是一个兵，来自老百姓</nobr></td>
<td> </td>
<td> </td>
</tr>
</table>
分享到：
相关推荐
CSS实现不换行/自动换行/文本超出隐藏显示省略号；自动换行，强制不换行，单行文本不换行多余文本显示省略号，第n行显示省略号,亲测有效。
CSS中的强制换行与强制不换行
主要介绍了CSS自动换行、强制不换行、强制断行、超出显示省略号的相关资料,需要的朋友可以参考下
css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行
更多的关于css强制换行 css强制不换行的css方法可以参考本站的内容页的文章控制.
纯css 控制超出宽度部分用省略号显示，纯数字跟连续的英文字母请绕行。
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号，但鼠标可以选择文字，酷吧……
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为...
兼容多浏览器的强制不换行的CSS，主要以DIV为列子，分析个浏览器的解析特性
主要介绍了CSS超出文本指定宽度用省略号代替和文本不换行的相关资料，小编觉的实用性非常，特此分享到脚本之家平台，供大家参考
1、强制不换行，同时以省略号结尾。 复制代码代码如下: <div xss=removed> 你好朋友朋友朋友我为什么不能看到效果啊 </div> 2、css自动换行 复制代码代码如下: div{ word-wrap: break-word; word-break: normal; ...
CSS自动换行兼容ie6 ie7+ ff
<label><a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>...</td>
1. word-break:break-all;只对英文起作用，以字母作为换行依据 2....不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持） 代码： 复制代码代码如下: .p1{ word-break:break-all; width:15
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
主要为大家介绍了CSS强制换行对齐的实现方法,涉及css中text-justify属性的使用技巧,需要的朋友可以参考下
CSS实现长标题用省略号显示，以前用JS用网络语言实现，其实CSS也可以的 不错哦~
css文本控制包括越界省略号以及自动换行，具体示例代码如下，大家可以测试下
css实现强制不换行/自动换行/强制换行
DIV CSS 图片自动换行 图片带鼠标效果