css之——div模拟textarea文本域的实现

1、问题的出现：

<textarea>标签为表单元素，但一般用于多行文本的输入，但是有一个明显的缺点就是不能实现高度自适应，内容过多就回出现滚动条。

为了实现高度自适应：用div标签来代模拟textarea文本域，实现高度自适应！

2、解决方案：

HTML代码：

<div class="test_box" contenteditable="true"><br /></div>    // 变为可编辑模式

CSS代码：

.test_box {

    width: 400px;

    min-height: 120px;

    max-height: 300px;

    _height: 120px; 　　　　//兼容IE6，给定高--内部元素溢出会撑开父标签

    margin-left: auto;

    margin-right: auto;

    padding: 3px;

    outline: 0; 　　　　　　//Firefox浏览器的div在可编辑模式下湖区焦点的时候会有虚线框

    border: 1px solid #a0b3d6;

    font-size: 12px;

    word-wrap: break-word; //允许长单词或者url地址换行到下一行

    overflow-x: hidden;

    overflow-y: auto;

    _overflow-y: visible;

}

3、解析：

<textarea>标签中的换行是以换行符的形式出现的；若换行符用于一般的div则不会出现换行，默认为空格；

因为div中默认的空白就会被忽略，所以无论是空白还是换行，都会被当做一个空格处理；

若要显示空白或者换行：添加white-space：pre；

若只显示换行，不显示空白：添加white-space：pre-line；

4、属性分析：

**white-space属性**
属性名	属性值	描述
white-space	normal	默认。空白会被浏览器忽略。
white-space	pre	空白会被浏览器保存，类似于<pre>标签
white-space	nowrap	文本不会换行，直到遇到<br>标签
white-space	pre-wrap	保留空白符序列，但正常的进行换行
white-space	pre-line	合并空白符序列，但正常进行换行

**contenteditable标签属性**
属性值	描述
inherit	默认。如果父元素可编辑，元素内容就可编辑
true	内容可编辑
false	内容不可编辑

5、css实现单行、多行文本溢出显示省略号（…）

对于单行文本溢出显示省略号：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

对于多行文本溢出显示省略号：（webkit内核）

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
display: -webkit-box 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式。
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property)，它没有出现在 CSS 规范草案中。

巴特西