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内容可编辑
html实现用户注册登录代码
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 规范草案中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。