文本自动“换行”
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 265
定义:当文本的长度大于容器宽度的时候,文本自动换行。对于中文,以及一般的英文单词,不会出现什么问题。一般出问题的是长串无分隔的英文单词或字符串,有以下几种情况:1、一般情况(无浮动无display:

 

定义:当文本的长度大于容器宽度的时候,文本自动换行。

对于中文,以及一般的英文单词,不会出现什么问题。

一般出问题的是长串无分隔的英文单词或字符串,有以下几种情况:

1、一般情况(无浮动 ; 无display:inline-block;)

  这种情况最好处理,只要加word-wrap: break-word;即可。

2、文本外容器有浮动,或者有display:inline-block;

  对于非FF浏览器,word-wrap:break-word; word-break:break-all;即可;

  对于FF浏览器,由于不能识别word-break:break-all;故此法无效,两种办法:

  法1:看下浮动或者display:inline-block;是否必须,如果非必须,去掉即可;如果必须,那么单纯依靠css就达不到这个目的了,求助于JS吧。

  法2:js实现,但是对于这种方法有一定的局限性,只适用于纯文本的情况。如果想要在文本段中包含其他html标签就会有问题。比如说,如果包含标签<span></span>,以使得该标签中的文本可以被修饰,如果折断处刚好在标签内部,则该标签就会被破坏,从而变成无意义字符。

参考的js代码如下(参考网上代码):

 

 

3、table布局(FF情况)

  对于table布局的,此时有个好处,只要在给某一列/行设置了word-wrap:break-word;overflow:hidden;之后,再给该table设置table-layout:fixed;即可达到自动换行效果。

 

【小结】

目前,还没有一个十分完美的方法来解决FF下的该问题,好在这种情况在设计合理,并且在输入的时候注意有效性之后,比较少见。

个人能力所限,考虑情况不周全,所想办法有待完善。

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2