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 div { width: 100px; /* 容器宽度 */ overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 不允许文本换行 */ ...
本篇将详细解释如何利用CSS实现文本的越界省略号显示以及自动换行。 首先，我们来看如何实现越界省略号的效果。这个效果通常用于长文本在有限的容器内无法完全展示时，用省略号(...)来表示文本被截断。关键的CSS...
1. word-break:break-all;只对英文起作用，以字母作为换行依据 2....不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持） 代码： 复制代码代码如下: .p1{ word-break:break-all; width:15
4. **超出显示省略号**：当文本内容超过容器宽度时，可以用`text-overflow: ellipsis`和`overflow: hidden`结合使用来实现省略号显示。这样，超出容器的部分会被隐藏，并且末尾会显示一个省略号来表示内容被截断。...
在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...
CSS中处理标题文本溢出用省略号表示的方法是一项常见的网页设计技巧，主要应用于当列表项、标题等文本内容超出其容器宽度时，为了保持界面的整洁性，将超出部分用省略号（...）来代替。以下是从标题、描述以及部分...
默认情况下，GridView会尝试适应内容，但如果内容过长，可能不会自动换行，而是截断或显示省略号。 1. **一般换行**：在默认情况下，GridView的单元格（cell）内的文本如果没有超过单元格宽度，会自动换行。但当...
`可以显示省略号表示内容被截断。 8. **非破坏性换行** 对于英文内容，`hyphens`属性可以开启自动连字符换行，使得单词在连字符规则允许的位置断开，提升阅读体验。`hyphens: auto;`在支持此特性的浏览器中效果...
1. `clip`：默认值，不显示省略号，而是简单地裁剪超出的内容。 2. `ellipsis`：当文本溢出时，显示省略号。 要使`text-overflow: ellipsis`生效，通常需要配合`white-space: nowrap`和`overflow: hidden`，这样...
除此之外，当文本内容超出容器时，我们还可以使用`text-overflow`属性结合`overflow`和`white-space`来实现文字溢出时显示省略号的效果。例如： ```css .text-overflow { text-overflow: ellipsis; overflow: ...
通过使用text-overflow属性，开发者可以控制溢出的文本是被裁剪还是用省略号来表示。 text-overflow属性具有两个参数值：clip和ellipsis。clip参数值表示溢出的内容将被简单地裁剪掉，不显示任何替代符号。而...
CSS（层叠样式表）提供了一种方法来强制文本在一行内显示，并且当文本超出容器宽度时，使用省略号（...）来表示被截断的部分。这个功能主要通过`text-overflow`属性来实现，它与`white-space`和`overflow`属性配合...
在网页设计和开发中，有时候我们需要对长文本进行限制，使其在一行内显示，并且超出的部分用省略号表示。这种效果通常用于标题或者摘要展示，以保持页面的整洁和可读性。以下是对这个需求的详细解释和实现方法。 ...
如果希望文本超出容器边界时显示省略号，可以使用`overflow`、`white-space`和`text-overflow`属性： ```css .test { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 6...
上述代码会裁剪超出容器的文本，不显示省略号。 ```css text-overflow: ellipsis; ``` 这段代码则会在文本溢出时显示省略号。 然而，仅仅设置 `text-overflow` 属性是不够的，还需要配合其他 CSS 属性来实现预期的...