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

最新推荐文章于 2021-01-11 21:41:58 发布

原创最新推荐文章于 2021-01-11 21:41:58 发布 · 555 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

4 篇文章

订阅专栏

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

[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>