您的位置:首页 > Web前端 > CSS

用CSS来实现把过长的字符串替换为省略号

2014-10-09 14:18 197 查看
一、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;
文本不会换行,文本会在在同一行上继续,直到遇到标签为止;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: