如何让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显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
css3 选择器
May 11 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery.each使用详解
2015/07/07 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python实现ATM系统
2020/02/17 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
浅谈python出错时traceback的解读
2020/07/15 Python
python 实现端口扫描工具
2020/12/18 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
经典演讲稿范文
2013/12/30 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
工作后的感想
2015/08/07 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书