本文介绍了如何使用CSS将HTML中的过长字符串替换为省略号。通过设置`table-layout:fixed`防止表格被内容撑大，结合`overflow:hidden`隐藏超出部分，`text-overflow:ellipsis`显示省略号，以及`white-space:nowrap`禁止文字换行，实现了字符串的截断处理。
一、HTML如下：
<table class="tbword"
width="200"
border="1">
<tr>
<td
nowrap="nowrap"
class="word">
<a
href="#">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</a>
<br/><br/>
<a
href="#">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</a>
</td>
</tr>
</table>
注1：td
nowrap="nowrap"，让禁止文字换行。
二、CSS如下：
<style
type="text/css">
.tbword{
table-layout:fixed;
}
.word{
overflow:hidden;
text-overflow:ellipsis;
white-space:
nowrap;
}
</style>
注2：table-layout:fixed，表格固定不会被里面的内容撑大；
注3：overflow:hidden，在td中的文字超出部分隐藏；
注4：text-overflow:ellipsis;
文本溢出部分显示省略号；
注5：white-space: nowrap;
文本不会换行，文本会在在同一行上继续，直到遇到标签为止；
扫一扫
1777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
