【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属性的值。
相关推荐
fruge1 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
软件技术NINI3 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
雨过天晴而后无语11 小时前
HTML纯JS添加删除行示例一
前端·javascript·html
luckyPian12 小时前
前端+AI:HTML5语义标签(一)
前端·ai·面试·html·html5·ai编程
有意义13 小时前
用HTML5、CSS和JavaScript创造代码敲击乐
html
皮皮虾我们跑14 小时前
前端HTML常用基础标
前端·javascript·html
小张成长计划..14 小时前
前端7:综合案例--品优购项目(HTML+CSS)
前端·css·html
杨超越luckly15 小时前
HTML应用指南:利用POST请求获取中国一汽红旗门店位置信息
前端·arcgis·html·数据可视化·门店数据
速易达网络1 天前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
@yanyu6661 天前
Tomcat安装与HTML响应实战
java·tomcat·html