div模拟textarea以css控制最大高度和最小高度实现高度自适应实例页面

最新推荐文章于 2024-11-04 08:38:26 发布

原创最新推荐文章于 2024-11-04 08:38:26 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

Css 专栏收录该内容

17 篇文章

订阅专栏

这个实例页面展示了如何使用CSS样式让一个div元素模拟textarea，通过设置min-height, max-height, overflow-y等属性，实现内容增减时的高度自适应效果。同时，代码还包含了针对不同浏览器的兼容性处理，如阻止非Chrome浏览器的粘贴操作。" 109243617,9506283,函数调用栈解析：C与Go的实现对比,"['C语言', 'Go语言', '编程原理', '函数实现', '栈']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div模拟textarea以实现高度自适应实例页面</title>
</head>
<style>
    .textarea_div {
        width: 100px;
        min-height: 20px;
        _height: 20px;
        max-height: 100px;
        line-height: 20px;
        margin:auto;
        padding: 4px;
        outline: 0;
        border: 1px solid purple;
        font-size: 12px;
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-user-modify: read-write-plaintext-only;
    }
</style>
<body>
<div class="textarea_div" contenteditable="true"></div>
<script>
    if (typeof document.webkitHidden == "undefined") {
        // 非chrome浏览器阻止粘贴
        box.onpaste = function() {
            return false;
        }
    }
</script>
</body>
</html>