如何让HTML中的表格内容自动换行,如何让HTML中的表格内容不换行

  • A+
所属分类:脚本语言

在一些实际开发当中,我们会经常用到HTML中的表格table),但是用表格的时候,如果表格内都是中文汉子,那页面上显示没啥问题,给出一段代码:

上面代码在浏览器中预览时候,没有什么异常,如图:

IE:

HTML表格内容换行的BUG

火狐:

HTML表格内容不换行的BUG

但是,当表格里的内容是一些数字的时候,比如:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>table内的td内容不换行</title>  
  6. <style type="text/css">  
  7.  
  8.  
  9.   
  10. </style>  
  11. </head>  
  12.   
  13. <body>  
  14. <table width="400">  
  15.   <tr>  
  16.     <td width="90" height="30">处理人工号:</td>  
  17.     <td width="410">001156,001157,001145,001149,001178,001123,001140,001167,001168,001134,001135</td>  
  18.   </tr>  
  19.   <tr>  
  20.     <td height="30">处理人姓名:</td>  
  21.     <td> </td>  
  22.   </tr>  
  23. </table>  
  24. </body>  
  25. </html>  

这时候再预览:

HTML表格内容不换行

HTML表格内容不换行

哈哈,是不是很诡异?尽管我们设置处理人工号所在的单元格宽度为90像素,但是它还是被右边的撑小了。我们可以使用下面方法来解决这个问题:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>table内的td内容不换行</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body{ font-size:12px;}   
  9. .breakLine{word-break: break-all;}   
  10. -->  
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15. <table width="400">  
  16.   <tr>  
  17.     <td width="90" height="30">处理人工号:</td>  
  18.     <td width="410" class="breakLine">001156,001157,001145,001149,001178,001123,001140,001167,001168,001134,001135</td>  
  19.   </tr>  
  20. </table>  
  21. </body>  
  22. </html>  

也就是加了一个样式属性:word-break: break-all;这时候,显示就正常了:

使用word-break: break-all解决HTML表格不换行的问题

使用word-break: break-all;解决HTML表格内容不换行的问题

我们在这里,对word-break属性做一个详细的讲解。

语法:word-break : normal | break-all | keep-all

取值:
normal    :  默认值。允许在词间换行 
break-all    :  该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 
keep-all    :  与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 

如果我们强制不换行可以使用keep-all;

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin