text-overflow:ellipsis用法

最新推荐文章于 2023-08-05 09:27:14 发布

原创最新推荐文章于 2023-08-05 09:27:14 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #class #html

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS属性text-overflow:ellipsis;来处理文本溢出情况,当文本长度超过容器宽度时,将多余部分以省略号形式显示。

文字段在容器内超宽时，截断该文字段并且续以省略号。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]