text-overflow:ellipsis用法

最新推荐文章于 2024-08-23 11:10:08 发布

DiscussQuestions

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量1.9k

点赞数

分类专栏： CSS 文章标签： border class html

本文链接：https://blog.csdn.net/DiscussQuestions/article/details/3742086

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文字段在容器内超宽时，截断该文字段并且续以省略号。text-overflow:ellipsis;就是干这个用的：
[html]
<br><br>
<style>
.ctl{
table-layout:fixed
}
   .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</style>

<center>
<table cellSpacing="0" cellpadding="1" width="456" class="ctl" border=1>
   <colgroup>
<col>
<col width="60">
   </colgroup>
   <tBody>
<tr>
   <td>这个是一个相当长的句子，然后就可以直接截取适当的文字，然后后面的用”...“代替</td>
   <td>(1/1)</td>
</tr>
<tr>
   <td>这个是一个相当长的句子，然后就可以直接截取适当的文字，然后后面的用”...“代替</td>
   <td>(1/1)</td>
</tr>
<tr>
   <td>这个是一个相当长的句子，然后就可以直接截取适当的文字，然后后面的用”...“代替</td>
   <td>(1/1)</td>
</tr>
<tr>
   <td>这个是一个相当长的句子，然后就可以直接截取适当的文字，然后后面的用”...“代替</td>
   <td>(1/1)</td>
</tr>
</tBody>
</table>
[/html]