- A+
所属分类:脚本语言
在一些实际开发当中,我们会经常用到HTML中的表格(table),但是用表格的时候,如果表格内都是中文汉子,那页面上显示没啥问题,给出一段代码:
上面代码在浏览器中预览时候,没有什么异常,如图:
IE:
火狐:
但是,当表格里的内容是一些数字的时候,比如:
XML/HTML Code复制内容到剪贴板
- <!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>table内的td内容不换行</title>
- <style type="text/css">
- </style>
- </head>
- <body>
- <table width="400">
- <tr>
- <td width="90" height="30">处理人工号:</td>
- <td width="410">001156,001157,001145,001149,001178,001123,001140,001167,001168,001134,001135</td>
- </tr>
- <tr>
- <td height="30">处理人姓名:</td>
- <td> </td>
- </tr>
- </table>
- </body>
- </html>
这时候再预览:
哈哈,是不是很诡异?尽管我们设置处理人工号所在的单元格宽度为90像素,但是它还是被右边的撑小了。我们可以使用下面方法来解决这个问题:
XML/HTML Code复制内容到剪贴板
- <!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>table内的td内容不换行</title>
- <style type="text/css">
- <!--
- body{ font-size:12px;}
- .breakLine{word-break: break-all;}
- -->
- </style>
- </head>
- <body>
- <table width="400">
- <tr>
- <td width="90" height="30">处理人工号:</td>
- <td width="410" class="breakLine">001156,001157,001145,001149,001178,001123,001140,001167,001168,001134,001135</td>
- </tr>
- </table>
- </body>
- </html>
也就是加了一个样式属性:word-break: break-all;这时候,显示就正常了:
我们在这里,对word-break属性做一个详细的讲解。
语法:word-break : normal | break-all | keep-all
取值:
normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
如果我们强制不换行可以使用keep-all;
- 我的微信
- 这是我的微信扫一扫
- 我的微信公众号
- 我的微信公众号扫一扫