如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度


Posted in HTML / CSS onAugust 01, 2019

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元素去掉滚动条自动换行自适应文本内容高度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
 

HTML / CSS 相关文章推荐
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 #HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 #HTML / CSS
Canvas图片分割效果的实现
Jul 29 #HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 #HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 #HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 #HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 #HTML / CSS
You might like
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
Python 3中的yield from语法详解
2017/01/18 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python爬虫的工作原理
2017/03/05 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
致百米运动员广播稿
2014/01/29 职场文书
文秘大学生求职信
2014/02/25 职场文书
村庄绿化方案
2014/05/07 职场文书
大学生年度个人总结
2015/02/15 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
安全生产培训心得体会
2016/01/18 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫