`
42087743
  • 浏览: 236381 次
  • 性别: Icon_minigender_1
  • 来自: 合肥&上海
社区版块
存档分类
最新评论

Firefox下自动换行的解决方案

阅读更多
    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>


    运行即可看出效果


3
1
分享到:
评论

相关推荐

    firefox css自动换行的实现方法

    本文将详细介绍如何在Firefox浏览器中实现CSS自动换行的功能,特别是针对Firefox中缺乏原生支持的问题,我们将探讨一种可行的解决方案。 #### 一、CSS自动换行的基本概念 在网页设计中,自动换行(或称为文本换行...

    如何实现FireFox文本自动换行

    本文将详细讲解如何在Firefox中实现文本自动换行。 一、CSS方法:通用方案与针对IE的优化 在Internet Explorer(IE)浏览器中,可以通过CSS属性`word-wrap`和`word-break`来实现文本自动换行。这两个属性可以帮助你...

    支持IE和FF同时自动换行

    本文将详细介绍一种通过使用`&lt;table&gt;`标签结合特定CSS属性的方式,来实现文本在Internet Explorer (IE) 和 Firefox (FF) 等浏览器中的自动换行效果。 #### 二、核心概念和技术背景 ##### 2.1 CSS自动换行相关属性 ...

    通过css样式控制单元格内超长文本自动换行.doc

    CSS自动换行解决方案 CSS(Cascading Style Sheets)是一种用于描述HTML文档样式的语言,以解决HTML文档的布局、样式、文字排版等问题。今天,我们将讨论如何使用 CSS 样式控制单元格内超长文本自动换行,并解决...

    firefox,IE 都兼容字符强制换行

    在实现字符强制换行时,关键是找到一种能在多种浏览器上都能正常工作的解决方案,而不是局限于特定的技术或方法。 在提供的文件名列表中,我们看到了`wordwrap.html`和`wordwrap.xml`。这些文件可能包含了关于如何...

    css之自动换行.pdf

    本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Firefox浏览器的差异。 首先,块级元素如`div`和`p`默认具有`white-space:normal`属性,这意味着当定义了宽度后,内容会根据需要自动换行。例如: ``...

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

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

    css之自动换行.docx

    对于表格,特别是Firefox浏览器,`table-layout:fixed`属性可以设定表格的列宽固定,这将使表格的列宽不再受单元格内容的影响。配合`word-break:break-all`或`word-wrap:break-word`,可以控制单元格内的文本换行。...

    html pre标签使文本自动换行

    在给定的CSS代码中,通过组合使用`white-space: pre-wrap`与其他浏览器的前缀版本,确保了在主流浏览器(如IE6, IE7, IE8, Firefox, Opera, Safari 和 Chrome)中,`&lt;pre&gt;`标签内的文本都能自动换行。`word-wrap: ...

    url 关于自动换行问题

    对于长URL来说,如果不进行特殊处理,默认情况下它不会自动换行,可能会导致超出容器宽度,影响整体布局。为了解决这个问题,可以使用`&lt;wbr&gt;`、`&#8203;`(零宽空格)以及`&shy;`(软连字符)等标记来帮助实现自动...

    多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    #### 二、解决方案 实现文本自动换行的关键在于使用正确的CSS属性组合。下面是一些常用的CSS属性及其兼容性说明: 1. **`word-break: break-all;`** - 作用:允许单词内部被拆分以适应容器宽度。 - 兼容性:...

    css word-break word-wrap 前台显示自动换行

    ` 是一种较好的解决方案,它能确保长串英文自动换行且不会超出容器,同时隐藏超出的部分。 - 然而,`word-wrap:break-word;overflow:auto;` 在Firefox下,长串英文可能会被部分遮盖。 5. **图片自动换行** - 当...

    CSS之float在IE浏览器下换行问题解决方法

    这种现象可能是由于IE浏览器对于浮动元素的处理方式与其他浏览器(如Firefox、Chrome等)存在差异造成的。在IE中,浮动元素后紧接的文本可能会被错误地放在浮动元素的下方,而实际上我们期望文本能够围绕浮动元素...

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

    在大多数现代浏览器中,例如Chrome、Firefox、Safari等,LI元素的文字超出其容器UL的宽度后会自动换行,这使得网页在不同的浏览器中表现更为一致。 要解决IE浏览器中LI文字不自动换行的问题,开发者需要特别指定LI...

    css 解决英文字符与阿位伯数字自动换行

    一个更好的解决方案是使用 `word-wrap: break-word;` 结合 `overflow: hidden;`。这样,当内容超出容器边界时,超出的部分会被隐藏,而不会影响正常单词的完整性。这在大多数情况下可以提供良好的兼容性和视觉效果。...

    让IE和火狐同时兼容

    - `word-break: break-all`属性可以使文本在长单词或URL等处自动换行,这对于确保文本内容在不同屏幕尺寸下的良好显示非常重要。 通过上述这些解决方案,我们可以有效地解决在IE和火狐浏览器中常见的兼容性问题。...

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

    如果是在Firefox浏览器下,为了隐藏超出内容,可以使用`overflow: hidden;`属性,而不是`overflow: auto;`,因为`auto`在这里无法起到隐藏溢出内容的效果。 最后,如果想在`td`或`th`元素中嵌套div或p元素,可以...

Global site tag (gtag.js) - Google Analytics