`

关于连续长文字自动换行

阅读更多
关于连续长文字自动换行这个问题挺令人头痛的,IE还好,火狐就麻烦了。

下面介绍一下CSS控制连续长文字自动换行的方法:
IE:
div   { word-wrap:break-word;  word-break:break-all;}


FireFox: /* 这句是针对火狐,上面两句在火狐下不能用,只好溢出时隐藏  */
div   { word-wrap:break-word;  word-break:break-all;overflow:hidden;}


若要火狐下换行,可用Javascript实现,例如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
 width:300px;
 word-wrap:break-word;
 border:1px solid red;
 }
/*]]>*/
</style>
</head>
<body>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type="text/javascript">
// <![CDATA[
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;  
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";  
strContent=strContent.substr(intLen,strContent.length);  
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById   &&   !document.all)  toBreakWord(37)
// ]]>
</script>
</body>
</html>


JavaScript虽然可以实现连续长文字自动换行,但‘连续长文字’的出现只是特别情况,但如果正常情况呢?

所以我编写了一个自定义标签(参见‘http://hanxin830311.iteye.com/blog/208752’),无论什么浏览器都可以用,也解决了上面的问题,基本还算好用吧。
分享到:
评论

相关推荐

    Pb中实现自动换行

    ### Pb中实现自动换行详解 #### 知识点概览 在PB(PowerBuilder)中,自动换行是一项常用且实用的功能,特别是在处理大量文本数据时,它能确保文本在限定的空间内清晰可见,避免水平滚动条的出现,提高用户体验。...

    html中表格td内容自动换行

    这将解决长串英文字母不能自动换行的问题和 TD 中汉字自动换行问题。 总结 在这里,我们讨论了如何使用 CSS 来控制 TD 中的换行。我们学习了强制不换行和强制换行的实现方法,并介绍了相关的属性和实例。

    串口调试工具 带自动换行功能

    本人潜心学习vc++有一段时间了,最近做了一个串口调试工具,虽然功能不多,但加了一些比较实用的功能,即设置接收多少字符后自动换行,接收一串连续字符后自动换行等。

    css控制文字自动换行的实现方法

    以上内容详细介绍了CSS中关于如何控制文字自动换行的几种实现方法,这在网页布局和排版中非常关键,能够帮助开发者更加精确地控制页面的显示效果,提升用户体验。在实际应用中,需要结合不同浏览器的兼容性来选择...

    css表格单元格中的长文本如何实现自动换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼。下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的...

    RichEdit 自动换行关键字高亮

    自动换行是指当用户在编辑框中输入文字时,如果一行已满,程序会自动将剩余的文字移到下一行。在`RichEdit`中,这通常是默认开启的功能,但可以通过设置某些属性或发送特定的消息来控制。例如,通过`EM_SETLIMITTEXT...

    CSS实现连续数字和英文的自动换行的方法

    对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行: html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义...

    js实现连续英文字符自动换行兼容ie6 ie7和firefox

    在本例中,我们要探讨的是如何使用JavaScript来实现连续英文字符在指定宽度限制下的自动换行,并确保该方案能够在不同的浏览器(包括较老的IE6和IE7,以及Firefox)中兼容运行。 在CSS中,通常可以使用`word-wrap`...

    关于IE标签LI文字换行问题

    在本问题的描述中,当指定LI元素的white-space属性为nowrap时,意味着在该元素内的文字将会保持连续,不会自动换行,即使文字长度超出了UL的宽度。然而这并非是解决IE浏览器中文字换行问题的正确方法,实际上应该是...

    [最新知识]excel表格如何自动换行.doc

    自动换行功能对于处理含有长文本的数据尤其有用,例如地址、描述性文字或产品名称。它能帮助你在有限的空间内展示更多的信息,而无需横向滚动。此外,你可以结合调整列宽来优化显示效果,使文本在单元格内布局得更加...

    解决Itext生成PDF中文不换行的jar

    在默认设置下,Itext可能会对英文字符进行换行处理,但对中文字符可能无法正确识别其间的单词边界,导致中文文本连续显示而不会自动换行。 为了解决"Java使用Itext生成PDF中文不换行"的问题,我们可以采取以下几种...

    css之自动换行实现代码

    对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html &lt;div id=wrap&gt;正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal...

    css文字换行

    默认情况下,浏览器会自动合并连续的空白字符并处理换行。但通过设置`white-space`,我们可以改变这一行为。例如: - `normal`:默认值,空白字符会被合并,换行也会被折叠。 - `pre`:保留所有空白和换行,就像在...

    css之自动换行.pdf

    在CSS布局中,自动换行是一个常见的需求,特别是在处理文本内容时。文本可能会包含各种字符类型,如连续的数字、英文字符,甚至不同语言的文字。本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Fire...

    CSS解决无空格的字母、数字过长不自动换行的问题

    本篇文章将详细讲解如何利用CSS来解决无空格的字母、数字过长不自动换行的问题。 首先,我们需要理解CSS中的`word-wrap`和`word-break`这两个属性。它们都与文本的换行规则有关,但作用方式略有不同。 1. `word-...

    纯数字或者字母不换行解决方法

    在这个例子中,通过设置`.number-list-item`类的CSS样式,使得列表项中的长数字或字母串能够在容器宽度限制内自动换行,从而保证了良好的布局效果。 #### 四、注意事项 1. **兼容性**:上述CSS属性在现代浏览器中...

    对于div,p等块级元素css如何实现自动换行

    正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”&gt;正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当...

Global site tag (gtag.js) - Google Analytics