您现在的位置是：网站首页> 编程资料编程资料

如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度textarea文本域宽度和高度width及height自动适应实现代码div模拟textarea文本域实现高度自适应效果代码css textarea 高度自适应,无滚动条做一个能自适应高度的textarea的示例代码

2023-10-12 367人已围观

简介这篇文章主要介绍了如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度的相关资料,需要的朋友可以参考下

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加
和等HTML元素来添加换行和打印空格。

pre去掉滚动条

pre显示文本内容时是不会自动换行的，此时可以添加一些CSS来解决：

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

上一篇：html5 冒号分隔符对齐的实现html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

下一篇：前端实现背景虚化但内容清晰且自适应的实例代码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢