div&td超出部分省略号表示

iteye_3607

于 2012-07-24 11:11:00 发布

阅读量99

点赞数

本文介绍了一种使用CSS实现文本溢出时自动省略显示的方法，适用于固定的div和table布局。通过设置特定样式，使得过长的内容能够优雅地被截断并以省略号形式展示。

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

前提是div宽度和table宽度固定

代码：

<style>  
div.wid{ 
    width:300px;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
 }  
 .tab {
 	width : 300px;
 }
 </style>  
<div class="wid">this is a very long centence.............................................end</div>
<table border="0" style="table-layout:fixed" class="tab">
	<tr>
		<td width="100" style="overflow:hidden;text-overflow:ellipsis">this is a very long centence.............................................end
		</td>
		<td width="100" style="overflow:hidden;text-overflow:ellipsis">this is a very long centence.............................................end
		</td>
		<td width="100" style="overflow:hidden;text-overflow:ellipsis">this is a very long centence.............................................end
		</td>
	</tr>
</table>