html自适应怎么没有滚动条(如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度)
类别:Web前端 浏览量:2314
时间:2021-10-01 01:32:54 html自适应怎么没有滚动条
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和 等HTML元素来添加换行和打印空格。
pre去掉滚动条
pre显示文本内容时是不会自动换行的,此时可以添加一些CSS来解决:
<pre>ourjs this is very very very very very very very very very very very very very very very logn contents.</pre> pre { word-wrap: break-word; white-space: pre-wrap; padding: 9.5px; background-color: #f5f5f5; border: 1px solid #ccc; }
textarea让高度自适应内容高度
textarea也能跟prev一样保留内容格式,但是元素高度是固定的,并且无法用CSS来调整。此时可以借助scrollHeight这个属性。
var textarea = document.getElementsByTagName('textarea')[0]; textarea.setAttribute('style','height:'+(textarea.scrollHeight + 12)+'px');
这里加了12px的padding。
总结
以上所述是小编给大家介绍的如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- mysql出现的问题及解决方法(mysql升级到5.7时,wordpress导数据报错1067的问题)
- navicat for mysql连接测试失败(Navicat Premiun远程连接MySQL报错10038解决方案)
- phpredis存储对象(PHP使用redis位图bitMap 实现签到功能)
- phpredis怎么实现任务(PHP swoole和redis异步任务实现方法分析)
- navicat premium连接mysql报错(Navicat连接MySQL错误描述分析)
- event.preventDefault方法的使用
- navicat载入sql文件(Navicat Premium如何导入SQL文件的方法步骤)
- stopPropagation、return false、preventDefault区别
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- 云服务器ecs使用教程(在阿里云ECS服务器上搭建WordPress的全过程解析)
- phpredis怎么设置队列(php使用lua+redis实现限流,计数器模式,令牌桶模式)
- html5创作(HTML5录音实践总结Preact)
- navicat中如何使用sql语句(Navicat Premium操作MySQL数据库执行sql语句)
- phpredis常用方法(PHP针对redis常用操作实例详解)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- wordpress如何在文章中自定义html(wordpress添加Html5的表单验证required方法小结)
- 越南特产(越南特产首饰)
- TVB负评王连续挑战警察角色《使徒行者3》中将饰演卧底(TVB负评王连续挑战警察角色使徒行者3中将饰演卧底)
- 《精英律师》剧照首曝光,实力演员飙戏,演绎律政职场百态(精英律师剧照首曝光)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
热门推荐
- php制作用户登录(php实现登录页面的简单实例)
- canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
- python实现简单加密(Python 隐藏输入密码时屏幕回显的实例)
- python使用aes加密解密(python实现AES加密与解密)
- mysql order by id查询变慢(MySQL不使用order by实现排名的三种思路总结)
- html5app开发用什么平台(Html5与App的通讯方式详解)
- lua接口调用崩溃(LuManager新开网站403故障的解决方法)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- docker目录映射不起作用(关于dockerfile build过程中报/bin/sh: pip: command not found的解决方法)
- html标签session什么意思(在html页面中取得session中的值的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9