pre标签里内容自动换行的方法

今天在写wiki的时候用了pre标签,我们都知道标签可定义预格式化的文本,一个常见应用就是用来放程序的源代码。我有一段代码特别长,结果它不换行直接超出了pre外层的容器。查阅了资料发现:被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在标签里面写代码的时候,如果你没有手动换行,它也会给你保留,而不会自动换行。

我就给pre加了一个style:

word-break: break-all;

但是它没有起到任何的作用,最后找到了一种兼容IE6,IE7, IE8, Firefox, Opera, Safari和Chrome的方法,在CSS中添加下面的代码:

pre {
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+ */
}

这样之后pre标签中的内容就自动换行了!

使用原生JavaScript模拟getElementByClassName

最近在工作中,由于有一个插件必须使用jquery-pack.js,而这个包又是非常古老的jquery,所以又的函数是无法使用的,例如$()选择器以及parent()都取不到标签的内容,所以没办法,只能用原生的JavaScript了,为了实现这个功能,我得通过HTML标签的Class来获得标签的DOM结构。在JavaScript 内建的核心中,document对象及element对象总共可以通过三个方式来获取其下的元素,分别是:getElementById(‘id’) 、getElementsByName(‘name’) 、getElementsByTagName(‘tag’)  。可是在设计网页时,最常常需要使用到的class却没有相对应的方法可以去获取className相同的元素。不过我们可以自己写一个,代码以很简单:

function getElementByClassName(tagName, className)
{
	var tag = document.getElementsByTagName(tagName);
	var tagAll = [];
	for (var i = 0; i < tag.length; i++) {
		if (tag[i].className.indexOf(className) != -1) {
			tagAll[tagAll.length] = tag[i];
		}
	}
	return tagAll;
}

原理就是通过获取指定的标签,使用getElementsByTagName来获取标签的内容,然后根据标签的className跟传进来的参数进行对比,如果相等就放入数组中最后返回。

PHP读取XML文档内容的方法

我们要读取一个结构如下的XML文档的内容:

<row>
<field name="id">1</field>
<field name="code">110000</field>
<field name="name">北京</field>
</row>
<row>
<field name="id">2</field>
<field name="code">120000</field>
<field name="name">天津</field>
</row>
<row>
<field name="id">3</field>
<field name="code">130000</field>
<field name="name">河北</field>
</row>

读取的方法很简单:

//首先要建一个DOMDocument对象
$doc = new DOMDocument();
//加载XML文件
$doc->load('xml/province.xml');
//获取所有的row标签
$rows = $doc->getElementsByTagName("row");
$data = array();
//遍历所有的row标签
foreach ($rows as $row) {
	$field = $row->getElementsByTagName("field");
	//item代表field标签的顺序,nodeValue是这个节点的值
	$id = $field->item(0)->nodeValue;
	$code = $field->item(1)->nodeValue;
	$name = $field->item(2)->nodeValue;
	$data = array(
		'id' => $id,
		'code' => $code,
		'name' => $name
	);
}

以下是DOMDocument的一些属性和方法:

属性:
Attributes 存储节点的属性列表(只读)
childNodes
存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
Definition
以DTD或XML模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement
返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation
返回XMLDOMImplementation对象
lastChild 返回当前节点最后一个子节点(只读)

nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字(只读)

nodeType 返回节点的类型(只读)
nodeTypedValue 存储节点值(可读写)

nodeValue 返回节点的文本(可读写)
ownerDocument 返回包含此节点的根文档(只读)

parentNode 返回父节点(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)

Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)

previousSibling 返回此节点的前一个兄弟节点(只读)
Text 返回此节点及其后代的文本内容(可读写)

url 返回最近载入的XML文档的URL(只读)
Xml
返回节点及其后代的XML表示(只读)

方法:
appendChild
为当前节点添加一个新的子节点,放在最后的子节点后
cloneNode 返回当前节点的拷贝
createAttribute
创建新的属性
createCDATASection 创建包括给定数据的CDATA段
createComment
创建一个注释节点
createDocumentFragment 创建DocumentFragment对象

createElement 创建一个元素节点
createEntityReference
创建EntityReference对象
createNode 创建给定类型,名字和命名空间的节点

createPorcessingInstruction 创建操作指令节点
createTextNode
创建包括给定数据的文本节点
getElementsByTagName 返回指定名字的元素集合
hasChildNodes
返回当前节点是否有子节点
insertBefore 在指定节点前插入子节点
Load 导入指定位置的XML文档

loadXML 导入指定字符串的XML文档
removeChild 从子结点列表中删除指定的子节点

replaceChild 从子节点列表中替换指定的子节点
Save 把XML文件存到指定节点

selectNodes 对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode
对节点进行指定的匹配,并返回第一个匹配节点
transformNode 使用指定的样式表对节点及其后代进行转换

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/?p=1482

textarea标签内容换行显示(自动换行和换行变成空格解决方法)

最近在工作中遇到了两个关于textarea的问题,下面我描述下:

在工作中遇到一个问题,用户在textarea输入的内容不能够自动换行。这个问题的解决办法就是给textarea添加CSS属性,用word-wrap:break-word来进行强制换行。

解决了第一个问题之后,又遇到了一个问题,用户在textarea中输入内容提交到数据库之后,系统再从数据库中读取内容再显示在textarea中,结果显示的内容虽然是自动换行的,但原来用户敲了回车的地方变成了空格,排版全乱了。解决方法有两种:

1.使用php中自带换行函数nl2br

nl2br("foo isn't\n bar");

2.使用str_replace函数将\n换成

str_replace("\n",'',$a);