HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等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元素去掉滚动条自动换行自适应文本内容高度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
 

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

  1. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 简洁自适应404页面HTML好看的404源码

    这篇文章主要介绍了简洁自适应404页面HTML好看的404源码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. h5页面背景图很长要有滚动条滑动效果的实现

    这篇文章主要介绍了h5页面背景图很长要有滚动条滑动效果的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. 处理textarea中的换行和空格

    这篇文章主要介绍了处理textarea中的换行和空格,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. 前端实现背景虚化但内容清晰且自适应 的实例代码

    这篇文章主要介绍了前端实现背景虚化但内容清晰且自适应 的实例代码,需要的朋友可以参考下

  6. HTML5 移动页面自适应手机屏幕四类方法总结

    这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下

  7. 使用postMessage让 iframe自适应高度的方法示例

    这篇文章主要介绍了使用postMessage让 iframe自适应高度的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. ios – UILabel不会使用AutoLayout在UIScrollView中自动换行

    我在UIScrollView中有一个UILabel,我试图用自动换行.我想使用AutoLayout进行布局配置.当UILabel不在UIScrollView中时,它会完美地包装.我只需要将行数设置为0并将换行模式设置为自动换行.但是,当我将UILabel放在UIScrollView中时,自动换行不再起作用.我已经检查了“DynamicUILabelheightinsideUIScrollVieww

  9. ios – 如何在UICollectionView上始终显示滚动条

    我在我正在处理的应用程序中添加了一个UICollectionView到UIView.在UICollectionView中显示我有一组从CoreData中提取的图像.垂直滚动工作正常但滚动条不会显示,直到用户触摸UICollectionView.如何确保右侧的滚动条始终可见,以便向用户指示它是否可滚动?

  10. swift UI专项训练38 用代码实现滚屏ScrollView

    有时候我们在一个页面中放不下所有内容,就需要用到ScrollView,多余的内容可以通过滚动来获取。然后在viewDidLoad中初始化一个scrollView:要想实现滚屏,pagingEnabled必须设为true。我们先把它设为true看看效果,别忘了把这个scrollView显示到页面中:然后我们把需要的内容加到这个scrollView中,例如增加一个标题:运行一下看看效果因为我们把scrollView的尺寸设定为高800,超出屏幕的高度,我们向下拖动,注意右侧出现的滚动条:然后继续添加需要的内容

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部