标签元素换行解决方案

来源:luqidong 发布时间:2013-12-27 19:11:03 点击数:

  问题背景:

  由于业务需求,需要对公司内部的聊天系统进行升级和维护,oa的整个ui都需要做调整,在一切顺利的时候去发现聊天发现聊天内容div标签内的文字内容过多会出现不换行的情况在ie6下。而且聊天内容会下沉在头像的下面。

  初步解决方案:

  由于要兼容ie6的所以我就设置啦聊天内容的p标签里的css为word-wrap:break-word;ord-break:break-all;然后在ie6下面发现聊天内容如果过多就会正常的换行了,但是在chrom下面却又发现了问题,由于包含内容长度的标签设置了自适应使得文字内容过多会撑住外面的p标签长度过长,从而和头像不在同一天水平线上,于是就会产生下沉的效果。

  最终解决方案:

  最终我在chrom下用了max-width这个属性,因为在ie6下不被识别,所以在ie6下还是会正常的显示,在chrom下设置一个最大的长度,使其内容不要太多撑这p标签元素太长从而想下沉。

  由于css不是我写的只是帮忙修改bug,所以这不是最优的解决方案。