当前位置: 首页 > news >正文

一张表格讲明白white-space属性。html如何识别\n\r,让这些特殊换行符换行。

大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉,这的确大大的使得文本的排版更加美观了,也怎加了区域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢?无外乎把不该去掉的空格展示出来,把不该合并的换行让它换行起来。 

描述换行符空格和制表符文字换行行尾空格
normal默认。空白会被浏览器忽略。连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充时是必要。也就是说不管是文本中是否有空白符和换行符都会被省略。并且遇到父容器需要换行填充的时候也会自动换行。大多数的标签white-space都是normal 。合并合并换行删除
nowrap文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止。和 normal 一样,连续的空白符会被合并。但文本内的换行无效。只有使用br标签才能换行,并且不进行软换行。合并合并不换行删除
pre空白会被浏览器保留。连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。顺带一说标签pre的 white-space的默认属性pre,其行为方式类似HTML中的<pre>标签。保留保留不换行保留
pre-wrap保留空白符序列,但是正常地进行换行。连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充时才会换行(软换行)。保留保留换行挂起
pre-line合并空白符序列,但是保留换行符。连续的空白符会被合并。在遇到换行符或者<br>元素,或者需要为了填充时会换行(软换行)。保留合并换行删除
break-spaces可以从空白符之间换行,所有空白符都被保留,包括行尾。与 pre-wrap的行为相同,也就是说连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充时才会换行(软换行)。除了:
 ● 任何保留的空白序列总是占用空间,包括在行尾。如果行尾的空白符够多就会看到空白符占用了一行,pre-wrap 是没有这种现象的。
 ● 每个保留的空格字符后都存在换行机会,包括空格字符之间。
 ● 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。
保留保留换行换行
inherit规定应该从父元素继承white-space属性的值。    

那么,html如何识别\n\r,让这些特殊换行符换行?

使用white-space: pre-wrap;

http://www.lryc.cn/news/107221.html

相关文章:

  • 【Linux】编写shell脚本将项目前一天打印的日志进行提取,并且单独保存
  • 快速搭建单机RocketMQ服务(开发环境)
  • Centos7搭建Apache Storm 集群运行环境
  • C语言假期作业 DAY 12
  • 2.4在运行时选择线程数量
  • element-ui中Notification 通知自定义样式、按钮及点击事件
  • 无头单向非循环单链表、带头双向循环链表
  • UE4/5C++多线程插件制作(二十、源码)
  • 构建稳健的PostgreSQL数据库:备份、恢复与灾难恢复策略
  • 查看本地mysql账号密码
  • 数据结构:顺序表详解
  • 采集数据筛选-过滤不要数据或只保留指定数据
  • RISC-V基础指令之shift移动指令slli、srli、srai、sll、srl、sra
  • 【沁恒蓝牙mesh】CH58x flash分区与数据存储管理
  • Ctfshow web入门 JWT篇 web345-web350 详细题解 全
  • 2023年国家留学基金委(CSC)青年骨干教师项目即将开始申报
  • GC垃圾回收器【入门笔记】
  • 在 React 中渲染大型数据集的 3 种方法
  • uniapp iOS 消息推送扩展:后台/杀死app进程状态能语音播报
  • 批量创建可配置物料参数文件
  • 性能压力测试的重要性与实施方法
  • HCIP入门静态实验
  • Vue与js的融合,如何编写现代化的前端应用
  • Boost开发指南-3.10singleton_pool
  • 腾讯云从业者认证考试考点——云网络产品
  • Miniled透明屏:超薄、轻便,还有哪些特点?
  • MySQL 极速安装使用与卸载
  • 举个栗子!Tableau 技巧(256):灵活折叠文本表的多级数据行
  • Android View 初始化完成后,如果再调用measure再设置点击事件则点击事件会失效的解决方案
  • 客户端电脑使用 FTP的Cadence_CIS库方法说明 (下)