【HTML】实现 pre 标签内容超出自动换行

文章目录

  • 示例:
html 复制代码
<pre>
一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本,一串很长的文本。
</pre>
  • 设置css超出换行属性:
css 复制代码
pre {
    white-space: pre-wrap;
}
  • white-space 解析:
描述
normal 默认,空白会被浏览器忽略。
pre 空白会被浏览器保留,其行为类似HTML中的<pre>标签。
nowrap 文本不会换行,文本会在同一行上继续,知道遇到<br>标签为止。
pre-wrap 保留空白符序列,但是正常的进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承white-space属性的值。
相关推荐
木木黄木木2 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
计算机毕设定制辅导-无忧学长8 小时前
HTML 性能优化之路:学习进度与优化策略(二)
学习·性能优化·html
小旋风012348 小时前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
前端Hardy12 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy12 小时前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy12 小时前
HTML&CSS:不一样的开关效果
javascript·css·html
木木黄木木14 小时前
HTML5手写签名板项目实战教程
前端·html·html5
爱上大树的小猪16 小时前
【前端安全】模板字符串动态拼接HTML的防XSS完全指南
前端·安全·html
懒大王952720 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
Yolo@~1 天前
个人网站:基于html、css、js网页开发界面
javascript·css·html