table不设置宽度，一行显示，超出使用省略号

最新推荐文章于 2023-08-15 14:52:25 发布

转载最新推荐文章于 2023-08-15 14:52:25 发布 · 1.5k 阅读

本文介绍了一种利用CSS实现表格内容超出固定宽度时显示省略号的方法，通过设置table-layout、white-space、overflow和text-overflow等属性，使得表格在不换行的情况下能够优雅地处理内容过长的问题。

table不设置宽度，一行显示，超出部分使用省略号。

<style>
		table{

			table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
		}
		td{
			width:100%;
			word-break:keep-all;/* 不换行 */
			white-space:nowrap;/* 不换行 */
			overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
			text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		}
	</style>
	<table>
		<tr>
				<th style="width: 60px;">类别</th>
				<th>反馈内容</th>
				<th style="width: 80px;">反馈时间</th>
		</tr>
		<tr>
				<td>交通</td>
				<td>最近几年城市交通日渐拥挤，车辆的增多，停车位紧张。</td>
				<td>07-19</td>
		</tr>
	</table>

在这里插入图片描述
参考地址：https://www.cnblogs.com/yy-hh/p/4523939.html
记录一下使用心得，元素属性之间的搭配。有不对之处，请指正。