WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>网页设计制作技巧>>如何让HTML中的表格内容自动换行,如何让HTML中的表格内容不换行

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

[ 录入者:91ctc | 时间:2013-03-19 14:16:50 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]

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

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. -->  
  10. </style>  
  11. </head>  
  12.   
  13. <body>  
  14. <table width="400">  
  15.   <tr>  
  16.     <td width="90" height="30">处理人姓名:</td>  
  17.     <td width="410">张三,李四,王五,孙秋,李大海,赵爽,鹏程,万利,陆闪闪,赵强,韦大宝,陈小小,李倩倩</td>  
  18.   </tr>  
  19. </table>  
  20. </body>  
  21. </html>  

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

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. body{ font-size:12px;}  
  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;

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号