html怎么让html表格换行里面的内容换行显示

来源：蜘蛛抓取(WebSpider) 时间：2016-11-25 11:57 标签： html表格自动换行
您的位置：本站首页>>网页设计制作技巧>>如何让HTML中的表格内容自动换行，如何让HTML中的表格内容不换行
如何让HTML中的表格内容自动换行，如何让HTML中的表格内容不换行
[ 录入者:91ctc |&时间: 14:16:50
| 作者: 91ctc| 来源:
| 浏览: 次 ]
在一些实际开发当中，我们会经常用到HTML中的表格（table），但是用表格的时候，如果表格内都是中文汉子，那页面上显示没啥问题，给出一段代码：
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&
&xmlns=&http://www.w3.org/1999/xhtml&&&
&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&
table内的td内容换行的问题&&
&type=&text/css&&&
&width=&400&&&
&&&&&width=&90&&height=&30&处理人姓名：&&
&&&&&width=&410&张三，李四，王五，孙秋，李大海，赵爽，鹏程，万利，陆闪闪，赵强，韦大宝，陈小小，李倩倩&&
上面代码在浏览器中预览时候，没有什么异常，如图：
但是，当表格里的内容是一些数字的时候，比如：
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&
&xmlns=&http://www.w3.org/1999/xhtml&&&
&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&
table内的td内容不换行&&
&type=&text/css&&&
&width=&400&&&
&&&&&width=&90&&height=&30&处理人工号：&&
&&&&&width=&410&157,149,123,167,134,001135&&
&&&&&height=&30&处理人姓名：&&
这时候再预览：
哈哈，是不是很诡异？尽管我们设置处理人工号所在的单元格宽度为90像素，但是它还是被右边的撑小了。我们可以使用下面方法来解决这个问题：
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&
&xmlns=&http://www.w3.org/1999/xhtml&&&
&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&
table内的td内容不换行&&
&type=&text/css&&&
body{&font-size:12} &&
.breakLine{word-break:&break-} &&
&width=&400&&&
&&&&&width=&90&&height=&30&处理人工号：&&
&&&&&width=&410&&class=&breakLine&157,149,123,167,134,001135&&
也就是加了一个样式属性：word-break: break-这时候，显示就正常了：
我们在这里，对word-break属性做一个详细的讲解。
语法：word-break : normal | break-all | keep-all
normal&&& :　 默认值。允许在词间换行&
break-all&&& :　 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本&
keep-all&&& :　 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本&
如果我们强制不换行可以使用keep-
PS:如果您对本文有纠错、质疑、转载、举报等问题时，请加入到网站Q&Q&群：（验证信息：）提交您的问题，让大伙一块讨论。谢谢您的支持，计算机教程中心网将会一如既往的提供优秀资源助您一臂之力！
上一篇：下一篇：
您可能感兴趣的文章
???????????????
??????????????????????
??????????????????????
网络先锋，引领科技，本站原创作品[转载请注明出处]。网站Q&Q&群：（验证信息：）
Copyright©
计算机教程中心网 . All rights reserved. 苏ICP备号关于表格中文字换行，单元格后面还有很长的空间但文字却自动换行【html吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：100,786贴子：
关于表格中文字换行，单元格后面还有很长的空间但文字却自动换行收藏
单元格后面还有很长的空间但文字却自动换行这怎么解决啊
精品web前端公开课,免费直播,现场答疑,精品html课程体系,带你体验BAT项目实况!---学习从来都不是一触而就,提升自己,就是现在!
用css控制tr或td的宽
登录百度帐号推荐应用26556人阅读
在项目中，有用到表格。因为有的内容比较长，所以需要列宽大一些，有的内容比较短，列宽就小一些。遇到了一个问题，在学校联系方式表里面，联系人电话/电子邮件这两列，无论我加多大的宽度，内容总是会把表格列撑的很宽，百度了一下，发现原因是这样的：
一般字母的话会被浏览器默认是一个字符串或者说一个单词，所以不会自动换行
所以需要设置一下，让表格内容自动换行。
1.在中设置样式style为word-wrap:break-word-break:break-（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ）
2.把表格的sytle的table-layout：fixed，就是表格固定宽度，就是表格既要自适应他外面的容器，也不要撑出去，然后设置td的word-wrap：break-word；换行，问题就解决了
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：265443次
积分：3446
积分：3446
排名：第10677名
原创：102篇
评论：138条
(1)(2)(2)(4)(1)(1)(3)(8)(13)(12)(11)(13)(11)(12)(15)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号： IT国子监（/itguozijian）
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
& 注意事项： 以上功能不支持FIREFOX，运行IE和GOOGLE。基于其它浏览器，未测试。(记得关注噢)&
阅读(1608)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'控制HTML表格内容在超出长度后不换行，而是显示出省略号',
blogAbstract:'
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}

我要回帖

更多关于 html表格自动换行 的文章

 

随机推荐