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

最新推荐文章于 2021-08-04 03:45:51 发布

最新推荐文章于 2021-08-04 03:45:51 发布 · 140 阅读

文章标签：

#div #td

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现固定宽度的div和table布局，包括文本溢出处理、文本换行及表格布局优化。

前提是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>