text-overflow:ellipsis用法_text ellipsis-优快云博客

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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