一般在做英文网站时,DIV对于很长的一段英文没办法自动换行,如何让其自动换行,并兼容所有浏览器。

2011-02-02 01:43:47

5 Answers

我个人所能知道的就是通过下面的方法来解决,但在个别浏览器版本下可能也有问题: 

style="word-wrap: break-word; word-break: break-all;"

同样也可以通过前端Javascript的方法解决自动折行的问题,解决代码: 

function toBreakWord(aString,intLen){ var strTemp=""; while(aString.length>intLen){ strTemp+=aString.substr(0,intLen)+" "; aString=aString.substr(intLen,aString.length); } strTemp+=" "+aString; return strTemp; } //if your string is not for "createTextNode" function, you should replace ' ' to
2011-02-02 03:29:08

完善一下@刘锡涛的答案,css来强制换行:

style="word-wrap: break-word; word-break: break-all;"在firefox是不兼容的,改成:style="word-wrap: break-word; word-break: break-all;overflow:hidden;"

提供一个js实现php的wordwrap函数的功能: 

function wordwrap (str, int_width, str_break, cut) { var m = ((arguments.length >= 2) ? arguments[1] : 75); var b = ((arguments.length >= 3) ? arguments[2] : "\n"); var c = ((arguments.length >= 4) ? arguments[3] : false); var i, j, l, s, r; str += ''; if (m < 1) { return str; } for (i = -1, l = (r = str.split(/\r\n|\n|\r/)).length; ++i < l; r[i] += s) { for (s = r[i], r[i] = ""; s.length > m; r[i] += s.slice(0, j) + ((s = s.slice(j)).length ? b : "")) { j = c == 2 || (j = s.slice(0, m + 1).match(/\S*(\s)?$/))[1] ? m : j.input.length - j[0].length || c == 1 && m || j.input.length + (j = s.slice(m).match(/^\S*/)).input.length; } } return r.join("\n"); }
2011-02-02 05:33:56

我们项目中用到的一个。 

<style type="text/css"> * { word-wrap: break-word; } </style> <table width="100%" border="0" cellpadding="3" cellspacing="1" style="border:1px solid #CEDFF5;" bgcolor="#DFE8F6"> <tr bgcolor="#FFFFFF"> <td align="center" nowrap width="300"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="word-break:break-word,white-space: -moz-pre-wrap;table-layout:fixed;"> <tr><td>BEHxyJHptKZ4GsvQe2oeyX_lNGwlMNmRENPvGs2qiO_Ej.7yOj7VBPB8AmXzgyGB4betK3ia6h-VERxwlpiQt7KHOLxDuRdNf1nVWV21BQKHDJcA2g_EQNwudk0</td></tr> </table> </td> <td height="30" align="center">1</td> </tr> </table>
2011-02-02 06:23:53

【常规描述】:对于所有中文字符和正常的英文字符不加任何css修饰完全可以实现文字超宽的自动换行。
【问题描述】:问题出来对于一个很长的英文字符来说,超宽后在FF下会超过边界,IE下则会称大其父元素;
【解决办法】:
首先我们必须弄清楚这2个属性,他们都是控制文字换行的:
1)word-wrap: break-word;
2)word-break: break-all;

word-wrap:当内容超宽时的处理办法,是控制换行的,break-word也就是说强制换行,但是把整个单词看成一个整体,但超宽时,会把整个单词换到下一行;
word-break:是控制是否断词的,break-all是在单词到边界时,下个字母自动到下一行,也就是会截断单词;
那么问题也就解决了,对于顽固的长串英文单词的处理办法,如果我们把这2个属性都写上的话,是可以解决这个问题,但新的问题来了,对于一个正常长度的英文单词也会被强制截断,只是因为一个长串单词而大大的影响了我们阅读其他内容,所以不可取;
我们只是想不要让特别的个体把容器撑大就好了,overflow:hidden现在问题就解决了;
css代码:word-wrap: break-word;overflow:hidden;
【浏览器测试结果】:
IE(6 7 8 9)、Chrome、Friefox、Opera、Safari全部通过;

2011-02-02 08:08:01
div { word-wrap: break-word; word-break: break-all; }

注意这个
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生

2011-02-02 09:36:33
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作