text-overflow:ellipsis用法

关注

原创最新推荐文章于 2026-04-16 18:07:54 发布 2k 阅读 AI 写同款· GEO 优化 ›

通过text-overflow: ellipsis实现省略号截断多行文本这三个点，看似简单，却蕴藏着前端开发者们对用户体验的体贴，对设计美学的追求，以及对CSS属性的巧妙运用。但是，人类的欲望是无穷的，单行文本的胜利，并不能满足前端开发者们对更复杂布局的需求。聪明的开发者们发挥创造力，利用CSS的各种特性，创造出一些“Hack”式的方法来实现多行文本的截断。想象一下，你正在设计一个商品列表，商品名称太长，超出容器宽度，如果直接截断，可能会让用户摸不着头脑。它告诉我们，在有限的空间内，如何优雅地呈现信息，如何激发用户的兴趣，如何提升用户体验。没有最好的方案，只有最适合的方案。阅读详情

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

收录于