关于在html中数字和英文不换行的解决方法

最新推荐文章于 2025-11-05 20:48:02 发布

最新推荐文章于 2025-11-05 20:48:02 发布 · 160 阅读

文章标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>字符换行</title> 
		<style type="text/css"> 
			table,td,th,div { border:1px green solid;} 
			code { font-family:"Courier New", Courier, monospace;} 
			</style> 
	</head> 
	<body> 
		<h1><code>div</code></h1> 
		<h1><code>All white-space:normal;</code></h1> 
		<div style="white-space:normal; width:200px;">
			11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
		</div> 
		<h1><code>IE \ word-wrap : break-word ;</code></h1> 
		<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 
		<h1><code>IE \ word-break:break-all;</code></h1> 
		<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 
		<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1> 
		<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 
		<h1><code>table</code></h1> 
		<h1><code>table-layout:fixed;</code></h1> 
		<table style="table-layout:fixed" width="200"> 
			<tr> 
				<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td> 
			</tr> 
		</table> 
		<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1> 
		<table width="200" style="table-layout:fixed;"> 
			<tr> 
				<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td> 
				<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
			</tr> 
		</table> 
		<h1><code>FF \ table-layout:fixed; overflow:hidden;</code></h1> 
		<table style="table-layout:fixed" width="200"> 
			<tr> 
				<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td> 
				<td width="75%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td> 
			</tr> 
		</table> 
	</body> 
</html>

将上面的代码复制到一个html文件中后打开可以看见只有使用table的时候英文和数字才能换行，所以可以使用table来解决这个问题