IE中不会出现问题, ff则会出现, 症状是, 文章不换行, 会突破div边框的限制, 在外部显示, 严重影响了页面显示的美观和整洁.
网易博客的解决方案是overflow="hidden", 虽然仍然会突破边框, 但会被边框外的部分覆盖, 页面显示不会太受影响, 但也不是最好的解决方法.
我在这里提供一种解决方法, 首先创建wrap.xml, 内容如下
<?xml version="1.0" encoding="UTF-8"?>
<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;
doWrap();
elem.addEventListener('overflow', doWrap, false);
function doWrap()
{
var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
while (walker.nextNode())
{
var node = walker.currentNode;
node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
}
}
//]]>
</constructor>
</implementation>
</binding>
</bindings>
然后新建页面wrap.html, 内容如下:
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<style>
.wordwrap {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
-moz-binding: url('./wordwrap.xml#wordwrap');
}
</style>
</head>
<body>
<div style="width:200px;border:1px solid red;"
class="wordwrap">
asdlfkasdfjlaksjdflajsdlfkajsdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
alskdjflakjsdflajsdlf asdkfjlaksjdf alksjdlfkjasdlfkjalsdjfa
sdf as dfalskdjflkajsdlfkjalsdkjflasdf askdjfasdf asdfa
sdfasdfasdf
</div>
</body>
</html>
运行即可看出效果
分享到：
相关推荐
本文将详细介绍如何在Firefox浏览器中实现CSS自动换行的功能，特别是针对Firefox中缺乏原生支持的问题，我们将探讨一种可行的解决方案。 #### 一、CSS自动换行的基本概念 在网页设计中，自动换行（或称为文本换行...
本文将详细讲解如何在Firefox中实现文本自动换行。 一、CSS方法：通用方案与针对IE的优化 在Internet Explorer（IE）浏览器中，可以通过CSS属性`word-wrap`和`word-break`来实现文本自动换行。这两个属性可以帮助你...
本文将详细介绍一种通过使用`<table>`标签结合特定CSS属性的方式，来实现文本在Internet Explorer (IE) 和 Firefox (FF) 等浏览器中的自动换行效果。 #### 二、核心概念和技术背景 ##### 2.1 CSS自动换行相关属性 ...
CSS自动换行解决方案 CSS（Cascading Style Sheets）是一种用于描述HTML文档样式的语言，以解决HTML文档的布局、样式、文字排版等问题。今天，我们将讨论如何使用 CSS 样式控制单元格内超长文本自动换行，并解决...
在实现字符强制换行时，关键是找到一种能在多种浏览器上都能正常工作的解决方案，而不是局限于特定的技术或方法。 在提供的文件名列表中，我们看到了`wordwrap.html`和`wordwrap.xml`。这些文件可能包含了关于如何...
本文主要探讨如何使用CSS来解决自动换行的问题，特别是针对IE和Firefox浏览器的差异。 首先，块级元素如`div`和`p`默认具有`white-space:normal`属性，这意味着当定义了宽度后，内容会根据需要自动换行。例如： ``...
在本例中，我们要探讨的是如何使用JavaScript来实现连续英文字符在指定宽度限制下的自动换行，并确保该方案能够在不同的浏览器（包括较老的IE6和IE7，以及Firefox）中兼容运行。 在CSS中，通常可以使用`word-wrap`...
对于表格，特别是Firefox浏览器，`table-layout:fixed`属性可以设定表格的列宽固定，这将使表格的列宽不再受单元格内容的影响。配合`word-break:break-all`或`word-wrap:break-word`，可以控制单元格内的文本换行。...
在给定的CSS代码中，通过组合使用`white-space: pre-wrap`与其他浏览器的前缀版本，确保了在主流浏览器（如IE6, IE7, IE8, Firefox, Opera, Safari 和 Chrome）中，`<pre>`标签内的文本都能自动换行。`word-wrap: ...
对于长URL来说，如果不进行特殊处理，默认情况下它不会自动换行，可能会导致超出容器宽度，影响整体布局。为了解决这个问题，可以使用`<wbr>`、`​`（零宽空格）以及`­`（软连字符）等标记来帮助实现自动...
#### 二、解决方案 实现文本自动换行的关键在于使用正确的CSS属性组合。下面是一些常用的CSS属性及其兼容性说明： 1. **`word-break: break-all;`** - 作用：允许单词内部被拆分以适应容器宽度。 - 兼容性：...
` 是一种较好的解决方案，它能确保长串英文自动换行且不会超出容器，同时隐藏超出的部分。 - 然而，`word-wrap:break-word;overflow:auto;` 在Firefox下，长串英文可能会被部分遮盖。 5. **图片自动换行** - 当...
这种现象可能是由于IE浏览器对于浮动元素的处理方式与其他浏览器（如Firefox、Chrome等）存在差异造成的。在IE中，浮动元素后紧接的文本可能会被错误地放在浮动元素的下方，而实际上我们期望文本能够围绕浮动元素...
在大多数现代浏览器中，例如Chrome、Firefox、Safari等，LI元素的文字超出其容器UL的宽度后会自动换行，这使得网页在不同的浏览器中表现更为一致。 要解决IE浏览器中LI文字不自动换行的问题，开发者需要特别指定LI...
一个更好的解决方案是使用 `word-wrap: break-word;` 结合 `overflow: hidden;`。这样，当内容超出容器边界时，超出的部分会被隐藏，而不会影响正常单词的完整性。这在大多数情况下可以提供良好的兼容性和视觉效果。...
- `word-break: break-all`属性可以使文本在长单词或URL等处自动换行，这对于确保文本内容在不同屏幕尺寸下的良好显示非常重要。 通过上述这些解决方案，我们可以有效地解决在IE和火狐浏览器中常见的兼容性问题。...
如果是在Firefox浏览器下，为了隐藏超出内容，可以使用`overflow: hidden;`属性，而不是`overflow: auto;`，因为`auto`在这里无法起到隐藏溢出内容的效果。 最后，如果想在`td`或`th`元素中嵌套div或p元素，可以...