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元素去掉滚动条自动换行自适应文本内容高度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- wordpress的静态php页面在哪(如何让PHPnow支持wordpress静态化链接的方法)
- linux lnmp安装教程(LNMP系列教程之 SSL安装WordPress博客程序下载与安装)
- navicat载入sql文件(Navicat Premium如何导入SQL文件的方法步骤)
- phpredis怎么实现任务(PHP swoole和redis异步任务实现方法分析)
- node.js express 上线(node+express实现分页效果)
- phpredis高级用法(PHP Redis扩展无法加载的问题解决方法)
- navicat连接mysql报错(解决Navicat Premium 连接 MySQL 8.0 报错"1251"的问题分析)
- 云数据库navicat连不上(Navicat Premium15连接云服务器中的数据库问题及遇到坑)
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- 云服务器ecs使用教程(在阿里云ECS服务器上搭建WordPress的全过程解析)
- wordpress如何在文章中自定义html(wordpress添加Html5的表单验证required方法小结)
- keydown、keypress、keyup的使用
- phpredis怎么测试成功(PHP+redis实现的限制抢购防止商品超发功能详解)
- navicat怎么和mysql连接(Navicat Premium远程连接MySQL数据库的方法)
- nodejs实现websocket服务端(Node.js+express+socket实现在线实时多人聊天室)
- phpredis使用场景(php和redis实现秒杀活动的流程)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
热门推荐
- jquery的动画效果api(jQuery框架实现元素显示及隐藏三种动画方式)
- iview 全局初始化组件(iview 权限管理的实现)
- mysql慢日志设置多少合适(MySQL慢查询日志的作用和开启)
- mysql全表查询如何优化(MySQL 分组查询的优化方法)
- zabbix 查询linux使用率高的进程(详解Linux使用ss命令结合zabbix对socket做监控)
- smart工具包括哪些元素(Smarty模板语法详解)
- mysql拆分字符串(MySQL 字符串拆分操作含分隔符的字符串截取)
- mysql批量生成uuid(一种简单的ID生成策略: Mysql表生成全局唯一ID的实现)
- html和js代码结合(JS、CSS和HTML实现注册页面)
- 防火墙如何设置ftp连接(浅谈防火墙对FTP的影响及故障排除分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9