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 规范草案中。