textarea多行文本，超出高度时显示滚动条

1，两个div，外面的div高度固定，带滚动条；内部为可编辑的div，高度自适应（或内部采用高度自适应的textarea）

<div class="describe"><div id="describe" contentEditable='true'></div>
</div>

.describe{height: 100px;width: 500px;border: 1px solid #5a6268;padding: 0 8px;overflow: hidden;
}

外部div使用滚动条样式插件（使用该插件的div需要设置高度）

$(".describe").mCustomScrollbar();

点击外部div即获取文本域焦点开始编辑

    $(".describe").click(function () {$("#describe").focus();});

2，textarea实现自适应高度

方法1：可编辑的<div>标签仿<textarea>；

方法2：为textarea添加事件监听，字数超过多少时改变高度

参考：https://www.cnblogs.com/dffy/p/6386318.html

https://www.cnblogs.com/ygjoe/p/7527275.html

textarea多行文本，超出高度时显示滚动条相关推荐

Java写记事本：文本超出范围时实现滚动条功能
问题背景本次Java课程的作业是做一个记事本,能够实现记事本的基本功能,如图所示问题描述想要实现内容超出文本框范围时,自动添加垂直滚动条和横向自适应. 添加了JScrollPane scroll ...
文本超出部分省略号显示
uni-app 文本超出部分省略号显示今日在将文本超出部分省略号显示问题上遇到困难,从网上找到解决方法.特此记录便于日后查阅. text {overflow: hidden;text-overflo ...
文本超出隐藏并显示省略号
文本超出隐藏并显示省略号单行 overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 多行 overflow: hidden;te ...
css实现文本超出宽度省略号显示
2019独角兽企业重金招聘Python工程师标准>>> 单行文本超出宽度省略号显示 .text {width:20px;overflow:hidden;text-overfolw:e ...
css超出滚动时隐藏滚动条
overflow-y hidden :纵轴隐藏 //css超出滚动时隐藏滚动条 .next-list{ height: 500px; overflow-x: hidd ...
CSS实现单行(多行)文本超出部分用省略号显示
前言(日常废话) 该文写的是CSS如何实现单行以及多行文本末尾的超出部分用省略号来表示. 目录 1.单行超出 2.多行超出正文现在有着一个这样的div,需要两个效果,一个是单行超出部分用省略号表示 ...
html 文本框初始化,Flutter 文本框初始化时显示默认值
刚开始作Flutter文本框时候,使用的是TextField.彷佛大多数状况下都没有问题.代码形式以下:html class _FooState extends State { TextEditing ...
uni-app 文本超出部分省略号显示
最近项目中用到了这个小特性,文本超出部分用省略号显示,特此记录便于日后查阅. .content {width: 100rpx !important;overflow: hidden;word-brea ...
idea换行字符数_IntelliJ IDEA，代码行宽度超出限制时自动换行
当我们使用IDE写代码时,为了保证代码的可阅读性和优雅性,通常会借助IDE的代码风格设置功能,令IDE智能完成的代码部分或者格式化输入的代码,可以按照预期的格式输出.其中有一项设置就是限制一行代码的宽 ...
html怎么使文档省略号显示,html 文本超出部分省略号显示
之前使用过这个例子,现在总结说明一下: 先给贴代码: 01 <p style="width: 300px;overflow: hidden;white-space: nowrap;te ...

textarea多行文本，超出高度时显示滚动条

textarea多行文本，超出高度时显示滚动条相关推荐

最新文章

热门文章