一张表格讲明白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;
相关文章:
一张表格讲明白white-space属性。html如何识别\n\r,让这些特殊换行符换行。
大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉,这的确大大的使得文本的排版更加美观了,也怎加了区域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢?…...
【Linux】编写shell脚本将项目前一天打印的日志进行提取,并且单独保存
业务场景:又到了熟悉的业务场景环节,其实应用上有很多,我们为了方便提取日志中部分关键的内容,对接给其他人也好,方便自己统计也罢,都会比每次我们都去服务器上及时查看,或者下载全部日志再筛选…...
快速搭建单机RocketMQ服务(开发环境)
一、什么是RocketMQ RocketMQ是阿里巴巴开源的一个消息中间件,在阿里内部历经了双十一等很多高并发场景的考验,能够处理亿万级别的消息。2016年开源后捐赠给Apache,现在是Apache的一个顶级项目。 早期阿里使用ActiveMQ,…...
Centos7搭建Apache Storm 集群运行环境
文章目录 1. 安装 Java2. 下载并解压 Storm3. 配置环境变量4. 配置 ZooKeeper5. 配置 Stormstorm.yaml自定义 storm.yamlstorm-env.shlogback/cluster.xml 6. 启动 Storm 集群7. 验证 1. 安装 Java Storm 运行在 Java 平台上,因此需要先安装 Java。你可以使用以下命…...
C语言假期作业 DAY 12
一、选择题 1、请阅读以下程序,其运行结果是( ) int main() { char cA; if(0<c<9) printf("YES"); else printf("NO"); return 0; } A: YES B: NO C: YESNO D: 语句错误 答案解析 正确答案: A 0<c&l…...
2.4在运行时选择线程数量
在运行时选择线程数量 C标准库中对此有所帮助的特性是std::thread::hardware_currency()。这个函数返回一个对于给定程序执行时能够真正并发运行的线程数量的指示。例如,在多核系统上它可能是CPU 核心的数量。它仅仅是一个提示,如果该信息不可用则函数可…...
element-ui中Notification 通知自定义样式、按钮及点击事件
Notification 通知用于悬浮出现在页面角落,显示全局的通知提醒消息。 一、自定义html页面 element-ui官方文档中说明Notification 通知组件的message 属性支持传入 HTML 片段,但是示例只展示了简单的html片段,通常不能满足开发中的更深入需要…...
无头单向非循环单链表、带头双向循环链表
文章内容 1. 链表的概念及结构 2. 链表的分类 3.链表实现 4.代码 文章目录 1. 链表的概念及结构 概念:链表是一种物理存储结构上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表 中的指针链接次序实现的 。 现实中 数据结构中 链表和顺序表…...
UE4/5C++多线程插件制作(二十、源码)
目录 头文件 MultiThreadPlugins.uplugin MultiThreadPlugins.Build.cs MultiThreadPlugins.h MTPPlatform.h MTPManage.h RTPAgendy.h MTPThreadTaskManage.h...
构建稳健的PostgreSQL数据库:备份、恢复与灾难恢复策略
在当今数字化时代,数据成为企业最宝贵的资产之一。而数据库是存储、管理和保护这些数据的核心。PostgreSQL,作为一个强大的开源关系型数据库管理系统,被广泛用于各种企业和应用场景。然而,即使使用了最强大的数据库系统࿰…...
查看本地mysql账号密码
使用Navicat工具打开本地mysql,新建查询输入下面查询语句 SELECT user, authentication_string FROM mysql.user WHERE userroot将authentication_string 中的加密密码复制出来打开链接: Magic Data 5输入加密的密码,和验证码,点…...
数据结构:顺序表详解
数据结构:顺序表详解 一、 线性表二、 顺序表概念及结构1. 静态顺序表:使用定长数组存储元素。2. 动态顺序表:使用动态开辟的数组存储。三、接口实现1. 创建2. 初始化3. 扩容4. 打印5. 销毁6. 尾插7. 尾删8. 头插9. 头删10. 插入任意位置数据…...
采集数据筛选-过滤不要数据或只保留指定数据
采集文章数据,有时候会遇到一些不需要采集的数据,或者只想采集一些特定的数据,可以使用简数采集器的内容过滤功能,对采集的数据进行筛选,只有符合的数据才采集保留。 可以用于过滤掉一些广告、专题、网站首页等无效数…...
RISC-V基础指令之shift移动指令slli、srli、srai、sll、srl、sra
RISC-V的shift指令是用于对一个寄存器或一个立即数进行位移运算,并将结果存放在另一个寄存器中的指令。位移运算就是把一个操作数的每一位向左或向右移动一定的位数,得到一个新的位。RISC-V的shift指令有以下几种: slli:左逻辑位…...
【沁恒蓝牙mesh】CH58x flash分区与数据存储管理
本文主要介绍了 沁恒蓝牙芯片 CH58x 的flash 分区与数据存储管理 📋 个人简介 💖 作者简介:大家好,我是喜欢记录零碎知识点的小菜鸟。😎📝 个人主页:欢迎访问我的 Ethernet_Comm 博客主页&…...
Ctfshow web入门 JWT篇 web345-web350 详细题解 全
CTFshow JWT web345 先看题目,提示admin。 抓个包看看看。 好吧我不装了,其实我知道是JWT。直接开做。 在jwt.io转换后,发现不存在第三部分的签证,也就不需要知道密钥。 全称是JSON Web Token。 通俗地说,JWT的本质…...
2023年国家留学基金委(CSC)青年骨干教师项目即将开始申报
国家留学基金委(以下简称CSC)的青年骨干教师出国研修项目(即高校合作项目),将于2023年9月10-25日进行网上报名及申请受理。知识人网小编特提醒申请者注意流程及政策,以防错过申报时间。 青年骨干教师项目&a…...
GC垃圾回收器【入门笔记】
GC:Garbage Collectors 垃圾回收器 C/C,手动回收内存;难调试、门槛高。忘记回收、多次回收等问题 Java、Golang等,有垃圾回收器:自动回收,技术门槛降低 一、如何定位垃圾? https://www.infoq.c…...
在 React 中渲染大型数据集的 3 种方法
随着 Web 应用程序变得越来越复杂,我们需要找到有效的方法来优化性能和渲染大型数据集。在 React 应用程序中处理大型数据集时,一次呈现所有数据可能会导致性能不佳和加载时间变慢。 虚拟化是一种通过一次仅呈现数据集的一部分来解决此问题的技术&#…...
uniapp iOS 消息推送扩展:后台/杀死app进程状态能语音播报
文章目录 引言I 前期准备1.1 配置扩展1.2 测试报文II iOS Extension(扩展)2.1 插件作者配置2.2 插件使用者配置see also引言 HBuilderX3.1.5+版本uni原生插件支持iOS Extension(扩展)。 消息推送离线语音播报插件获取方式: 公z号:iOS逆向: 离线包x10, 源码是x15。 实…...
别再乱接Type-C了!手把手教你设计一个5V/5A的稳定电源模块(附电路图)
5V/5A Type-C电源模块实战设计指南:从选型到避坑全解析 Type-C接口凭借其正反插拔的便利性,已成为现代电子设备的标配。但许多DIY爱好者在自制Type-C电源模块时,常遇到供电不稳、接口烧毁甚至设备损坏的问题。本文将带你从零设计一个稳定可靠…...
Power BI视觉对象交互设计秘籍--巧用书签按钮实现动态提示
1. 为什么需要动态提示功能? 做数据分析报表最怕什么?不是数据不准,而是看报表的人看不懂。我见过太多这样的场景:精心设计的柱状图被用户误读,复杂的折线图被理解成完全相反的趋势。这时候你会想,要是有个…...
保姆级教程:用Davinci Configurator配置RH850F1KMS1双看门狗(AWO域与ISO域)
RH850F1KMS1双看门狗配置实战:从AWO域到ISO域的完整设计指南 在汽车电子开发领域,系统可靠性直接关系到行车安全。RH850F1KMS1作为瑞萨电子面向功能安全应用的高性能MCU,其独特的双看门狗架构(AWO域与ISO域)为系统提供…...
从Netfilter到IPVS:深入解析Linux内核负载均衡的实现与配置
1. Linux内核网络框架与负载均衡基础 当你打开一个网页或使用手机APP时,后台可能有成百上千台服务器在协同工作。这些服务器如何高效分配流量?这就是负载均衡技术的用武之地。在Linux生态中,从Netfilter到IPVS的技术演进,为我们提…...
WhisperX语音识别:如何实现70倍实时转录精度与词级时间戳?
WhisperX语音识别:如何实现70倍实时转录精度与词级时间戳? 【免费下载链接】whisperX m-bain/whisperX: 是一个用于实现语音识别和语音合成的 JavaScript 库。适合在需要进行语音识别和语音合成的网页中使用。特点是提供了一种简单、易用的 APIÿ…...
机械设计制造及自动化—万门大学月特训班 (清华老师讲授) 1、机械制图 2、机械制造 3、机械原理 4、机械设计
机械设计制造及自动化—万门大学月特训班 (清华老师讲授) 1、机械制图 2、机械制造 3、机械原理 4、机械设计 全580集,直接从零基础到机械设计与自动化行业大佬 在这里插入图片描述...
告别PDF转换烦恼:Marker让学术文档秒变Markdown的完整指南
告别PDF转换烦恼:Marker让学术文档秒变Markdown的完整指南 【免费下载链接】marker 一个高效、准确的工具,能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式,支持多语言和复杂布局处理,可选集成 LLM 提升精度,…...
不用编译!快速修改Scratch-blocks积木字体的偷懒方法
零编译实战:Scratch-blocks字体调整极简方案 在Scratch 3.0的二次开发过程中,积木字体过小是开发者普遍遇到的痛点。官方移除了字体调节功能后,低分辨率设备上的中文显示尤为模糊。传统解决方案需要配置Python环境并重新编译scratch-blocks库…...
别再只生成exe了:用MSFvenom制作更隐蔽的Windows 11后门(附检测与清除)
Windows 11高级渗透测试:从隐蔽后门构建到防御检测实战 在网络安全攻防演练中,传统的可执行文件Payload已经难以绕过现代终端防护系统。随着Windows 11安全机制的持续强化,红队需要掌握更隐蔽的渗透技术,而蓝队则必须了解这些新型…...
ColorControl专业调校指南:从问题诊断到显示优化的参数配置全流程
ColorControl专业调校指南:从问题诊断到显示优化的参数配置全流程 【免费下载链接】ColorControl Easily change NVIDIA display settings and/or control LG TVs 项目地址: https://gitcode.com/gh_mirrors/co/ColorControl 一、问题诊断:你的显…...
