实现Web表框中文字自动换行
2010-3-24 - - css应用 - Views
在Web中，我们经常会遇到各式各样镶套的表框，如评论列表框等等。这些表框，一般情况下都可以正常使用，但偏偏有时会碰到一些小问题：比如，当遇到一连串的英文词或一堆感叹号、阿拉伯数字时，便有可能将网页及表框撑开（如图所示）。
低一度总结了一下，以后大家遇到类似情况，只须在CSS中定义如下句子，便可解决。
table {table-layout: fixed;}
td {word-break: break-all; word-wrap: break-word;}
注释说明：
1.table {table-layout: fixed;}，可让表格中有感叹号或阿拉伯数字之类的长串字符自动换行。
2.td {word-break: break-all}，一般情况下用这句这OK了，但在有些特殊情况下还是会被撑开，因此需要再加上后面一句{word-wrap: break-word;}才可以彻底解决。这个样式可以让表格中的一些连续的英文单词或Url自动换行。
另外需注意一点，大家要根据表框所套用的DIV层做样式的相应修改，活学活用。OK！
关键词 // 网页设计 css实例 css应用 文字自动换行
出处：低一度，链接：http://www.diyidu.cn/post/font_huanhang.html
随机推荐
to "实现Web表框中文字自动换行"
-
#1 GEZ鸽子 回复该留言 2010-3-24 12:41:52坐个沙发！
-
呵呵，这个方法不错哦，我在项目中都是通过JAVA代码控制的。
唉，没办法，CSS学得不行。diyidu 于 2010-3-24 14:22:02 回复这个是很基本的CSS了。liuzm 于 2010-3-24 18:26:28 回复那看来我是连基本的CSS也没有入门了哦，嘿嘿。diyidu 于 2010-3-24 21:59:57 回复没那么绝对啊，基本的东西太多了。
-
哎这回慢了，没有安装自动填表机。沙发被别人抢走了。没看懂。diyidu 于 2010-3-24 15:00:49 回复你说什么我才不懂呢？自动填表机？
-
第一个我明白，以前有人和我说过的，但是后面的那个word-wrap: break-word是什么意思啊？和前面的那个不是一样的吗？用一个为什么就不能解决呢？diyidu 于 2010-3-24 15:35:44 回复好吧，我给你说说——
word-break: break-all和word-wrap: break-word都能使其容器，如DIV的内容自动换行。它们的区别就在于：
1.word-break: break-all，例如div宽200px，它的内容就会到200px处自动换行，如果该行末端有个英文单词很长（如congratulation等），它会把单词截断，变成该行末端为conra，下一行为tulation。
2.word-wrap: break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断。
word-break: break-all支持版本：IE5以上，该行为与亚洲语言的normal相同，也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
word-wrap: break-word支持版本：IE5.5以上，内容将在边界内换行。如果需要，词内换行（word-break）也将发生。无名博客 于 2010-3-24 21:02:45 回复那你之前做的那些模板都加了吗？是否还需要再加上一下呢？diyidu 于 2010-3-24 21:58:43 回复有的有加有的没加：）
-
OK！相比规定容器宽度，这个要好一些。diyidu 于 2010-3-24 15:36:32 回复这是肯定的啦。
-
学习了，问题解决！diyidu 于 2010-3-24 16:16:09 回复Good。解决了就好。
-
这样是比较灵活，我都是强制换行，但在这里是不可行的。diyidu 于 2010-3-24 21:57:49 回复强制换行还是有局限的。
-
感谢博主分享，这段代码很重要！diyidu 于 2010-3-25 8:14:54 回复不客气，希望用得上。
-
我通常也是定义下CSS。diyidu 于 2010-3-25 8:15:29 回复这应该是比较科学的做法。
-
知识贴，留名。diyidu 于 2010-3-25 8:16:03 回复呵呵，欢迎留名。
-
学习了哦，以前也出现过类似的问题，当时没太注意。。。 #_#diyidu 于 2010-3-25 9:27:16 回复恩，用这个方法就OK了。
-
只要给对应的文字加上word-break: break-all属性就可以了！diyidu 于 2010-3-25 17:08:56 回复是这个理儿，不过直接加在文字里，治标不治本啊。
-
以前学过，不过现在全忘记了。diyidu 于 2010-3-25 17:12:02 回复这东西就是这样，学得快忘得也快。
-
博主的主题很清晰，左栏的放些热文，什么的，
然后放上百度的悬浮AD比较好。支持一下。diyidu 于 2010-3-25 17:29:26 回复广告已经有点多了，呵呵。谢谢妹妹。
-
这对不懂div的人就很难处理了。diyidu 于 2010-3-26 8:15:10 回复道理是一样的，关键是要活用。
-
有时的确被挤开的框框烦死～diyidu 于 2010-3-26 8:15:55 回复是吗？我就遇到过这个问题啊。
-
代码盲飘过，表拍我。diyidu 于 2010-3-26 8:16:31 回复好吧，让你飘过。
-
貌似以前我都是css强制换行的。diyidu 于 2010-3-26 8:17:13 回复那很好啊！很科学。
-
你这广告有点多啊。
CSS接触过一点，呵呵。不过没使用过。diyidu 于 2010-3-26 8:17:56 回复会多吗？还好吧，就两个地方。
-
学习了，这个问题终于能搞定了。diyidu 于 2010-3-26 8:18:31 回复那解决最好，问好下。
-
不错，学习了。。diyidu 于 2010-3-26 8:51:59 回复呵，多批评：）
-
我遇到过类似问题，呵，感谢分享。diyidu 于 2010-3-26 8:52:37 回复不客气，用得上最好。
-
此评论已过滤。diyidu 于 2010-3-26 8:51:03 回复不管你是谁，请别到我这儿贴广告，哥最看不起你们这种人。
-
这个文章我好像留过言啊。。怎么没有呢？diyidu 于 2010-3-26 8:47:36 回复估计是含有敏感字符，被过滤了。
-
呵呵，谢谢分享。暂时还没发现这些问题。。diyidu 于 2010-3-26 9:18:30 回复呵，你可以测试看看存不存在这个问题。
-
兄台真是全面手啊，佩服~diyidu 于 2010-3-26 9:23:17 回复呵，别抬举哥了，我会骄傲的。
-
问题是：tttttttttt这种是被当做一个单词来算的，实际上除非有极端的情况，默认的换行都是适用的。反而，强行截断单词会对西文产生不好的影响。diyidu 于 2010-3-26 12:16:59 回复是，这也是一个问题呵。
-
呵呵，你更新文章的速度没有以前快了哦。
看来你真的是要淡出江湖了！diyidu 于 2010-3-26 12:17:41 回复现在还好啦，大约3天更新一帖：）
-
博主没更新，过来点点小广而告之。diyidu 于 2010-3-26 14:01:21 回复呵，谢谢：）下午会更新一帖。
-
很是不错呀。。diyidu 于 2010-3-26 16:01:44 回复汗。。不错什么啊……
-
这个不错。diyidu 于 2010-3-26 16:34:07 回复hehe，谢谢阅读。
-
这个代码是非常实用的。diyidu 于 2010-3-27 19:55:31 回复你用了吗？呵呵。
-
主题一般都很完善~~嘻嘻。diyidu 于 2010-3-28 9:55:46 回复呵，没听懂！
-
学习了，不能自动换行很容易把页面撑得很难看。以前见过一种好像是在html里面设置的，现在又学了一种用CSS设置的。。diyidu 于 2010-3-28 11:00:55 回复呵，班门弄斧，请多批评。
-
有用的信息，借用了，之前碰到类似问题，我只能用overflow：auto来解决，感觉很不美观。diyidu 于 2010-3-29 14:05:25 回复恩。用得着最好：）
