Html中的自动换行,可以采用
其实只要在表格控制中添加一句
<td style="word-break:break-all">就搞定了。
其中可能对英文换行可能会分开一个单词问题:解决如下:
语法:
word-break : normal | break-all | keep-all
参数:
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
<br>是软回车,就是换行后还是紧接着上一行,没有</br>
<p>是段落标签,由于例如居中、缩进等标签都是以段落为单位的,所以它可比<br>有更多作用,但每次换行都会多空一行,有</p>
除此之外,例如表格、表单、水平线等都是强制换行,就是紧接着的标签前无论有没有换行标签,都强制换行。
如:
<html> <head> <title></title> <meta content='text/html; charset=gb2312' http-equiv='Content-Type'> </head> <body bgcolor=#f5f5ff> <pre> <font size=2 face=宋体> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all"> <tr> <td style="WORD-BREAK: break-all; WORD-WRAP: break-word"> 文本正文 </td> </tr> </table> </pre> </FONT> </body> </html>
文字溢出进行处理的解决方案
如果碰到文字溢出的情况,解决起来也是比较麻烦的,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用CSS就能完美解决文字溢出的办法。比如这样的一个需求:一个新闻列表,新闻标题后紧跟着日期,新闻标题的宽度超过一定的宽度就要自动截断,但是日期必须显示完整。
其实大家立马能想到可以用一个有序列表(ol+li)来实现,不过样式的表示上还需要考虑到浏览器的兼容问题,经过研究,下面代码能解决大多数浏览器的兼容,代码如下:
<ol id="news-list"> <li><a href="#">毛毛猫系列漫画</a><span>2010-09-18</span></li> <li><a href="#">一个网页设计需求方眼中的网页设计</a><span>2010-09-18</span></li> <li><a href="#">如何应对骗稿的客户</a><span>2010-09-18</span></li> <li><a href="#">平面设计师:一个涂有虚名的职业</a><span>2010-09-18</span></li> <li><a href="#">站在十字路口的网站设计师</a><span>2010-09-18</span></li> <li><a href="#">设计师请别把自己不当人。</a><span>2010-09-18</span></li> <li><a href="#">什么样的包装才叫做有新意的包装呢?</a><span>2010-09-18</span></li> <li><a href="#">寻隐活动寻找网页设计开发高手</a><span>2010-09-18</span></li> <li><a href="#">求平面设计同行们的经验指引</a><span>2010-09-18</span></li> </ol>
这里重点说下的是样式表的部分,text-overflow: ellipsis; text-overflow就是定义文字溢出的时候,该如何截断文字,属性值是ellipsis的时候就是当对象内文本溢出的时候显示省略标记(…),该属性支持IE6以上的版本IE7/8/9和除Firefox以外的现代标准浏览器:Chrome、Safari。Opera是个特例,但也有一个专门针对Opera的属性:-o-text-overflow: ellipsis;
下面就是完整的CSS代码如下:
<style type="text/css"> #news-list { list-style:none; width:156px; /*注意这个宽度*/ } #news-list:after { content:’’; display:block; clear:both; height:0px; } #news-list li { clear:both; /*清除li中的浮动*/ } #news-list li a { float:left; /*标题向左浮动*/ color:#333; text-decoration:none; font-size:13px; max-width:156px; /*给标准浏览器一个最大宽度*/ height:24px; white-space:nowrap !important; /*强制文字不换行(标准浏览器)*/ white-space:normal; /*溢出的时候文字换行,并配合上面的固定高度,对文字进行裁切*/ overflow:hidden; text-overflow:ellipsis; /*截断文字,显示省略号(...)*/ -o-text-overflow:ellipsis; /*Opera的专用截断文字的属性*/ background:none; /*解决IE6的莫名高度BUG,试试在IE6下去掉这个属性*/ } #news-list li a:hover { color:#000; text-decoration:underline; } #news-list li span { float:left; /*日期向左浮动*/ color:#666; padding-left:10px; margin-right:-99px; /*让标题和日期显示在同一行*/ _position:relative; /*针对IE6使用相对定位*/ } </style>
再如本站点的首页的文章列表展示也是采用此种方案。