首页 > 其他 > 详细

文本框自适应高度,当达到一定行数时就自动增加滚动条

时间:2019-08-10 16:34:33      阅读:105      评论:0      收藏:0      [点我收藏+]

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>div模拟textarea文本域轻松实现高度自适应</title>
<style>
h2 {
text-align: center;
margin: 50px auto;
}

.test_box {
width: 400px;
min-height: 20px;
/*设置最小高度*/
max-height: 500px;
/*设置最大高度超过300px时出现滚动条*/
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 13px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 16px;
line-height: 24px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

</head>

<body>
<h2>div模拟textarea文本域轻松实现高度自适应</h2>
<div class="test_box" contenteditable="true">
<br />
</div>
</body>

</html>

技术分享图片

 

文本框自适应高度,当达到一定行数时就自动增加滚动条

原文:https://www.cnblogs.com/zhouguoshuai/p/11331508.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!