怎样用css让表格里的单元格换行，不是文本换行

html-css030

怎样用css让表格里的单元格换行，不是文本换行,第1张

HTML里面加了一个样式属性：word-break: break-all，可以实现表格的自动换行，具体参考代码如下：<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=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属性简单介绍如下：语法：word-break : normal | break-all | keep-all取值： normal:　默认值。允许在词间换行 break-all:　 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all:　 与所有非亚洲语言的 normal 相同。

导致换行因素很多，看你怎么定义的了，但总体上来说大多是：溢出换行，内容超过了父元素可用空间，会换行。

可以考虑的解决方法：

强制限制各个子元素（你的三行元素）长度，确保三列总宽度不超过父元素的可用宽度（三行元素的内外边距和边框易被人为忽略导致总宽度超过可用宽度的100%）。这种情况常出现在浮动元素上。

<div id="fa">

    <div id="sub1"></div>

    <div id="sub2"></div>

    <div id="sub3"></div>

</div>

<!--

（#sub1+#sub2+sub3）的实际宽度 小于或等于 #fa的可用宽度

实际宽度 = sub的内外边距+边框+可用宽度

-->

不同的定义会有不同原因的，最好贴出你的代码，好让大家帮你解决。

一、使用writing-mode属性语法：writing-mode:lr-tb或writing-mode:tb-rl参数：1、lr-tb：从左向右，从上往下2、tb-rl：从上往下，从右向左运行代码发现，ie显示正常，火狐却不行，所以不建议使用writing-mode属性，下面使用模拟方法实现。　二、模拟文字竖排代码：ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}此方法让li右浮动，设置li宽度和字宽度一样都是14px，这样就自动换行了。另外，“word-wrap:break-wordword-break:nomal”这句实现标点自动换行（连续字符自动换行）。