表格中的单元格中的内容自动换行

最新推荐文章于 2020-12-28 21:31:45 发布

iteye_14360

最新推荐文章于 2020-12-28 21:31:45 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/iteye_14360/article/details/82583256

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍两种在HTML表格中实现长文本自动换行的方法，确保内容在固定宽度的单元格中能正确显示，避免溢出或破坏布局。第一种方法通过设置table-layout为fixed并结合word-wrap为break-word；第二种方法则是直接在div标签内应用word-wrap属性。

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

[b][size=xx-large]方式1：[/size][/b]使用table-layout和word-wrap两个CSS属性。


<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>

		<table width="1000" border="0" cellspacing="1" cellpadding="0" style='table-layout:fixed'>       
			<tr>
			 <td width="250" >
				aaaaaaaaaaaaaa
			 </td>
			 <td width="250" >
				aaaaaaaaaaaaaa
			 </td>
			<td width="250" >
				aaaaaaaaaaaaaa
			 </td>
			 <td width="250" style="word-wrap:break-word;" >
				111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
			 </td>
			</tr>
		</table>
	</body>
</html>

[b][size=xx-large]方式2:[/size][/b]


<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>

		<table width="1000" border="0" cellspacing="1" cellpadding="0">       
			<tr>
			 <td width="250" >
				aaaaaaaaaaaaaa
			 </td>
			 <td width="250" >
				aaaaaaaaaaaaaa
			 </td>
			<td width="250" >
				aaaaaaaaaaaaaa
			 </td>
			 <td width="250">
			    <div style='word-wrap:break-word; width:250px;'>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
				</div>
			 </td>
			</tr>
		</table>
	</body>
</html>