当前位置: 首页 > 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;

相关文章:

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

大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉&#xff0c;这的确大大的使得文本的排版更加美观了&#xff0c;也怎加了区域的利用率&#xff0c;可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢&#xff1f;…...

【Linux】编写shell脚本将项目前一天打印的日志进行提取,并且单独保存

业务场景&#xff1a;又到了熟悉的业务场景环节&#xff0c;其实应用上有很多&#xff0c;我们为了方便提取日志中部分关键的内容&#xff0c;对接给其他人也好&#xff0c;方便自己统计也罢&#xff0c;都会比每次我们都去服务器上及时查看&#xff0c;或者下载全部日志再筛选…...

快速搭建单机RocketMQ服务(开发环境)

一、什么是RocketMQ ​ RocketMQ是阿里巴巴开源的一个消息中间件&#xff0c;在阿里内部历经了双十一等很多高并发场景的考验&#xff0c;能够处理亿万级别的消息。2016年开源后捐赠给Apache&#xff0c;现在是Apache的一个顶级项目。 早期阿里使用ActiveMQ&#xff0c…...

Centos7搭建Apache Storm 集群运行环境

文章目录 1. 安装 Java2. 下载并解压 Storm3. 配置环境变量4. 配置 ZooKeeper5. 配置 Stormstorm.yaml自定义 storm.yamlstorm-env.shlogback/cluster.xml 6. 启动 Storm 集群7. 验证 1. 安装 Java Storm 运行在 Java 平台上&#xff0c;因此需要先安装 Java。你可以使用以下命…...

C语言假期作业 DAY 12

一、选择题 1、请阅读以下程序&#xff0c;其运行结果是&#xff08; &#xff09; int main() { char cA; if(0<c<9) printf("YES"); else printf("NO"); return 0; } A: YES B: NO C: YESNO D: 语句错误 答案解析 正确答案&#xff1a; A 0<c&l…...

2.4在运行时选择线程数量

在运行时选择线程数量 C标准库中对此有所帮助的特性是std::thread::hardware_currency()。这个函数返回一个对于给定程序执行时能够真正并发运行的线程数量的指示。例如&#xff0c;在多核系统上它可能是CPU 核心的数量。它仅仅是一个提示&#xff0c;如果该信息不可用则函数可…...

element-ui中Notification 通知自定义样式、按钮及点击事件

Notification 通知用于悬浮出现在页面角落&#xff0c;显示全局的通知提醒消息。 一、自定义html页面 element-ui官方文档中说明Notification 通知组件的message 属性支持传入 HTML 片段&#xff0c;但是示例只展示了简单的html片段&#xff0c;通常不能满足开发中的更深入需要…...

无头单向非循环单链表、带头双向循环链表

文章内容 1. 链表的概念及结构 2. 链表的分类 3.链表实现 4.代码 文章目录 1. 链表的概念及结构 概念&#xff1a;链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表 中的指针链接次序实现的 。 现实中 数据结构中 链表和顺序表…...

UE4/5C++多线程插件制作(二十、源码)

目录 头文件 MultiThreadPlugins.uplugin MultiThreadPlugins.Build.cs MultiThreadPlugins.h MTPPlatform.h MTPManage.h RTPAgendy.h MTPThreadTaskManage.h...

构建稳健的PostgreSQL数据库:备份、恢复与灾难恢复策略

在当今数字化时代&#xff0c;数据成为企业最宝贵的资产之一。而数据库是存储、管理和保护这些数据的核心。PostgreSQL&#xff0c;作为一个强大的开源关系型数据库管理系统&#xff0c;被广泛用于各种企业和应用场景。然而&#xff0c;即使使用了最强大的数据库系统&#xff0…...

查看本地mysql账号密码

使用Navicat工具打开本地mysql&#xff0c;新建查询输入下面查询语句 SELECT user, authentication_string FROM mysql.user WHERE userroot将authentication_string 中的加密密码复制出来打开链接&#xff1a; Magic Data 5输入加密的密码&#xff0c;和验证码&#xff0c;点…...

数据结构:顺序表详解

数据结构&#xff1a;顺序表详解 一、 线性表二、 顺序表概念及结构1. 静态顺序表&#xff1a;使用定长数组存储元素。2. 动态顺序表&#xff1a;使用动态开辟的数组存储。三、接口实现1. 创建2. 初始化3. 扩容4. 打印5. 销毁6. 尾插7. 尾删8. 头插9. 头删10. 插入任意位置数据…...

采集数据筛选-过滤不要数据或只保留指定数据

采集文章数据&#xff0c;有时候会遇到一些不需要采集的数据&#xff0c;或者只想采集一些特定的数据&#xff0c;可以使用简数采集器的内容过滤功能&#xff0c;对采集的数据进行筛选&#xff0c;只有符合的数据才采集保留。 可以用于过滤掉一些广告、专题、网站首页等无效数…...

RISC-V基础指令之shift移动指令slli、srli、srai、sll、srl、sra

RISC-V的shift指令是用于对一个寄存器或一个立即数进行位移运算&#xff0c;并将结果存放在另一个寄存器中的指令。位移运算就是把一个操作数的每一位向左或向右移动一定的位数&#xff0c;得到一个新的位。RISC-V的shift指令有以下几种&#xff1a; slli&#xff1a;左逻辑位…...

【沁恒蓝牙mesh】CH58x flash分区与数据存储管理

本文主要介绍了 沁恒蓝牙芯片 CH58x 的flash 分区与数据存储管理 &#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是喜欢记录零碎知识点的小菜鸟。&#x1f60e;&#x1f4dd; 个人主页&#xff1a;欢迎访问我的 Ethernet_Comm 博客主页&…...

Ctfshow web入门 JWT篇 web345-web350 详细题解 全

CTFshow JWT web345 先看题目&#xff0c;提示admin。 抓个包看看看。 好吧我不装了&#xff0c;其实我知道是JWT。直接开做。 在jwt.io转换后&#xff0c;发现不存在第三部分的签证&#xff0c;也就不需要知道密钥。 全称是JSON Web Token。 通俗地说&#xff0c;JWT的本质…...

2023年国家留学基金委(CSC)青年骨干教师项目即将开始申报

国家留学基金委&#xff08;以下简称CSC&#xff09;的青年骨干教师出国研修项目&#xff08;即高校合作项目&#xff09;&#xff0c;将于2023年9月10-25日进行网上报名及申请受理。知识人网小编特提醒申请者注意流程及政策&#xff0c;以防错过申报时间。 青年骨干教师项目&a…...

GC垃圾回收器【入门笔记】

GC&#xff1a;Garbage Collectors 垃圾回收器 C/C&#xff0c;手动回收内存&#xff1b;难调试、门槛高。忘记回收、多次回收等问题 Java、Golang等&#xff0c;有垃圾回收器&#xff1a;自动回收&#xff0c;技术门槛降低 一、如何定位垃圾&#xff1f; https://www.infoq.c…...

在 React 中渲染大型数据集的 3 种方法

随着 Web 应用程序变得越来越复杂&#xff0c;我们需要找到有效的方法来优化性能和渲染大型数据集。在 React 应用程序中处理大型数据集时&#xff0c;一次呈现所有数据可能会导致性能不佳和加载时间变慢。 虚拟化是一种通过一次仅呈现数据集的一部分来解决此问题的技术&#…...

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。 实…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...