`
menjoy
  • 浏览: 422140 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

div 实现长英文字母自动换行——兼容IE/FF/CHROME

阅读更多

最近做个英文网站,DIV内的英文不能自动换行,搜了一下,都是用IE独有的属性控制,对FF没作用,套表格的方法又觉得有点笨拙。继续查了(搜索引擎真是个好东西),终于找到完美方案,兼容IE/FF/CHROME,分享给大家:

 

CSS中加入:

 

div{
word-wrap:break-word;
word-break:break-all;/*前两项是IE独有属性,有了这两行IE没问题了*/
-moz-binding: url('wordwrap.xml#wordwrap');/*这个是针对FF的,xml文件位置可以自己指定*/
word-break:break-all;
white-space: moz-pre-wrap;
overflow: hidden;
}

 

以下是XML文件内容

 

<?xml version = "1.0"?>

<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id = "wordwrap" applyauthorstyles = "false">
<implementation>
<constructor>
//<![CDATA[

var elem = this;
elem.addEventListener('overflow',
function()
{
var exp = /<&#8203;\/*[&#8203;_\s="'\w]+>/g;

var txt = elem.innerHTML;
var chars = txt.split('');
var newTxt = chars.join('&#8203;');
newTxt = newTxt.replace(exp, reconstructTag);
elem.innerHTML = newTxt;
},false);

function reconstructTag(_tag)
{
return _tag.replace(/&#8203;/g, '');
}

//]]>
</constructor>
</implementation>
</binding>

</bindings>

分享到:
评论

相关推荐

    DIV CSS 图片自动换行

    在网页设计中,"DIV CSS 图片自动换行"是一个常见的布局技巧,它涉及到CSS(层叠样式表)中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片,使得图片能够在页面中自动适应并换行排列,同时还可以...

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

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

    DIV 文字可以换行但是纯数字和字母不可以换行解决方案

    在网页设计中,经常会遇到一个有趣的现象:当我们在一个`&lt;div&gt;`容器内输入文本时,文本能够正常换行,但若该文本只包含纯数字或字母时,却无法自动换行。这可能会影响页面的布局与美观性。为了解决这一问题,我们...

    可编辑并且能够自动换行的div

    标题所提到的“可编辑并且能够自动换行的div”,实际上是在讨论如何创建一个具有文本编辑功能的 `div` 元素,并且在用户输入文字时能自动换行,保持其形状不变。这涉及到 HTML、CSS 以及可能的 JavaScript 技术。 ...

    英文自动换行怎样解决

    然而,在处理英文文本尤其是包含长单词或连续英文字符串时,自动换行可能会遇到挑战。本文将探讨如何有效地实现英文自动换行,并通过CSS属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制...

    div中英文无法自动换行的解决办法

    但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。 原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个...

    网页英文自动换行代码

    不同于中文文本,英文文本在默认情况下不会自动进行换行处理,这可能会导致长单词或URL超出显示区域而被截断或者挤出显示框外,影响用户的阅读体验。因此,实现英文文本的自动换行功能是提升网页布局美观性和实用性...

    html中div不自动换行、强制不换行的具体实现

    1.用标签实现不换行 复制代码代码如下: &lt;div&gt;Hello world!&lt;nobr&gt; Hello world!&lt;nobr&gt;&lt;/div&gt; 2.用&lt;用nowrap元素&gt;标签 复制代码代码如下: &lt;div&gt;Hello world! Hello world! Hello world! Hello world!&lt;/div&gt; 3...

    div嵌套的div溢出时换行

    当我们希望div在溢出时自动换行,而不是隐藏或显示滚动条,可以采用以下方法: - `display: flex`:使用弹性布局,通过设置`flex-wrap: wrap`可以让子元素在必要时换行。 - `white-space: nowrap` 和 `white-...

    兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行.

    2. **解决长串英文字母无法自动换行的问题**: - IE浏览器: ```css #wrap { white-space: normal; width: 200px; } ``` 或 ```css #wrap { word-break: break-all; width: 200px; } ``` - Firefox...

    html中表格td内容自动换行

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

    button自适应高度和自动换行

    "button自适应高度和自动换行"这个主题主要关注如何让按钮在不同屏幕尺寸和内容长度下保持良好的视觉效果。以下是对这个主题的详细解释: 一、自适应高度 1. CSS Flexbox:使用Flexbox布局模型可以轻松实现按钮的...

    JQUERY图片自动垂直居中水平居中-支持IE678910/chrome/firefox/opera

    明锋工作室整理常用资料。本次资料是一个自动居中插件,只要设定div长度和高度,其中的图片会自动铺满容器并且自动居中。...并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。

    CSS 文字自动换行

    本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器如IE6和IE7的支持。 #### 知识点二:白空间处理属性 `white-space` `white-space` 属性用于定义如何处理元素内的空白...

    html内容超出了div的宽度如何换行让内容自动换行

    在工作中评论内容测试遇到评论着的评论内容为:“dddddddddddddddddddddddddddddddddddddddddddddddddd”,错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要...

    字体超过div范围自动换行

    标题“字体超过div范围自动换行”及描述“字体超过div范围自动换行”,明确指出了一种解决方案——利用CSS属性使文本在超出`div`容器范围时自动换行。下面将深入探讨这一主题,包括相关CSS属性的使用方法、应用场景...

    jsp页面Table自动换行

    在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格需要在视觉上分成多行显示。在JSP中,这可以通过CSS样式和HTML属性来控制。 【描述】提到的“Linux文档”可能是...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    这里我们将详细讨论如何实现强制不换行以及自动换行,并分析不同换行方式的区别。 1. **强制不换行并以省略号结尾** 当希望文本在容器内不换行且超出部分以省略号表示时,可以使用以下CSS样式: ```css div { ...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

Global site tag (gtag.js) - Google Analytics