一张表格讲明白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.mzph.cn/news/18436.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3+ts+vite 引入静态资源require报错 ——解决方案

vue3中报错&#xff0c;导入reqire静态图片资源的时候&#xff0c;显示require不存在 require is not defined 发现是 在vite中不能使用require引入图片资源&#xff0c;因为这里的require是webpack提供的一种加载能力&#xff0c;由于我们使用的是Vite&#xff0c;因此这里必须…

在腾讯云服务器OpenCLoudOS系统中安装nginx(有图详解)

1. 创建安装目录 2. 下载、安装、编译 进入安装目录&#xff1a; cd /app/soft/nginx/ 下载&#xff1a; wget https://nginx.org/download/nginx-1.21.6.tar.gz 解压&#xff1a; tar -zxvf nginx-1.21.6.tar.gz 安装插件&#xff1a; yum -y install pcre-devel 安装…

spring boot+thymeleaf+semantic ui 分页

参考&#xff1a; https://my.oschina.net/ayyao/blog/898041 后端 springboot 使用&#xff1a; com.github.pagehelper.PageInfo&#xff0c;作为分页对象 <!--引入分页插件--> <dependency><groupId>com.github.pagehelper</groupId><artifa…

高通滤波器,低通滤波器

1.高通滤波器是根据像素与邻近像素的亮度差值来提升该像素的亮度。 import cv2 import numpy as np from scipy import ndimagekernel_3_3 np.array([[-1,-1,-1],[-1,8,-1],[-1,-1,-1]]) print(kernel_3_3) kernel_5_5 np.array([[-1,-1,-1,-1,-1],[-1,1,2,1,-1],[-1,2,4,2,-…

python操作MongoDB数据库入门

MongoDB是一种非关系型数据库&#xff08;NoSQL&#xff09;&#xff0c;其以文档形式存储数据&#xff0c;这些文档集合在一起就是一个数据库。MongoDB的表现形式非常灵活&#xff0c;它的表现形式可以是JSON形式的键值对。Python中的pymongo库是MongoDB的官方驱动库&#xff…

音视频技术开发周刊 | 304

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 更强的Llama 2开源&#xff0c;可直接商用&#xff1a;一夜之间&#xff0c;大模型格局变了 Meta 终于发布了大家期待已久的免费可商用版本 Llama 2。 6000份问卷透露出AI…

ClickHouse目录结构

默认安装路径&#xff1a;/var/lib/clickhouse/ 目录结构&#xff1a; 主要介绍metadata和data metadata 其中的default、system及相应的数据库&#xff0c;.sql文件即数据库创建相关sql语句 进入default数据库&#xff08;默认数据库&#xff09;&#xff1a; 可以看到数据库…

「如何优雅有效利用周末和下班时间?」

文章目录 每日一句正能量前言下班的时间规划周末的时间规划提升周末体验感的好方法怎样才能获得充分的休息后记 每日一句正能量 眼望古城街尽&#xff0c;心谱落愁无序&#xff0c;旧时的誓言&#xff0c;曾而相似&#xff0c;河水在遵循河道的指引下&#xff0c;在曲折前进中放…

零基础学习编程(前端、Java、Python、大数据……)的一些建议

一、学习要明确动机和方向&#xff0c;有强烈的学习欲望 就自学前端来说&#xff0c;很多时候你其实都是孤独的&#xff0c;不知道到底学得怎么样&#xff0c;除非有强烈的欲望&#xff0c;不然大部分的新手很容易就会半途而废。 首先&#xff0c;要想明白自己学习编程的强烈…

QT学习笔记-QT5.15 + MSVC编译套件时编译日志及运行日志日志乱码解决

QT学习笔记-QT5.15 MSVC编译套件时编译日志及运行日志日志中文乱码解决 0、基础环境1、QtCreator中的基本设置编辑->首选项->文本编辑器 2、问题1&#xff1a;MSVC编译日志乱码问题解决问题描述解决方法 3、问题2&#xff1a;MSVC构建套件编译后程序运行日志乱码问题问题…

【电影推荐系统】实时推荐

概览 技术方案&#xff1a; 日志采集服务&#xff1a;通过利用Flume-ng对业务平台中用户对于电影的一次评分行为进行采集&#xff0c;实时发送到Kafka集群。消息缓冲服务&#xff1a;项目采用Kafka作为流式数据的缓存组件&#xff0c;接受来自Flume的数据采集请求。并将数据推…

单片机遇到“auto segment too large“怎么办

遇到这个情况有可能是某一个数组太大&#xff0c;然后单片机内部数据存储区不够用&#xff0c; 所以可以把这个数据存在单片机外例如 int led[8][8]{ {1,1,1,1,1,1,1,1},//1 {1,0,0,0,0,0,0,1},//2 {1,0,0,0,0,0,0,1},//3 {1,0,0,0,0,0,0,1},…

Android View 初始化完成后,如果再调用measure再设置点击事件则点击事件会失效的解决方案

比如LinearLayout 或RecyclerView 我们在初始化完成并加载完数据后再次调用measure计算高度再setLayoutParams 会导致后面设置的点击事件失效。 比如&#xff1a; RecyclerView rv_select dialog.findViewById(R.id.rv_select); //点击事件rv_select.setOnItemClickListener(n…

php5.6的yum安装

目录 1. 卸载老版本php5.4 2. 检查还有没有php 3.安装扩展源 4. 安装remi源 5. 安装yum-config-manager管理工具 6. 安装php 7. 安装php进程管理器 8. 开启php-fpm 9.查看安装的包&#xff0c;查看版本 1. 卸载老版本php5.4 rpm -qa | grep php* yum remove php* 2.…

深度学习:使用全连接神经网络FCN实现MNIST手写数字识别

1 引言 本项目构建了一个全连接神经网络(FCN)&#xff0c;实现对MINST数据集手写数字的识别&#xff0c;没有借助任何深度学习算法库&#xff0c;从原理上理解手写数字识别的全过程&#xff0c;包括反向传播&#xff0c;梯度下降等。 2 全连接神经网络介绍 2.1 什么是全连接…

maven引入本地jar包的简单方式【IDEA】【SpringBoot】

前言 想必点进来看这篇文章的各位&#xff0c;都是已经习惯了Maven从中央仓库或者阿里仓库直接拉取jar包进行使用。我也是&#x1f921;&#x1f921;。 前两天遇到一个工作场景&#xff0c;对接三方平台&#xff0c;结果对方就是提供的一个jar包下载链接&#xff0c;可给我整…

SpringBoot使用MyBatis Plus + 自动更新数据表

1、Mybatis Plus介绍 Mybatis&#xff0c;用过的都知道&#xff0c;这里不介绍&#xff0c;mybatis plus只是在mybatis原来的基础上做了些改进&#xff0c;增强了些功能&#xff0c;增强的功能主要为增加更多常用接口方法调用&#xff0c;减少xml内sql语句编写&#xff0c;也可…

python使用selenium 打开谷歌浏览器闪退, 怎么解决

问题描述&#xff1a; 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 使用 Selenium 操作 Chrome 浏览器&#xff0c; Chrome 浏览器闪退 问题解决&#xff1a; 可能是以下几个方面出现了问题&#xff1a; 1. Chromedriver 版本与 Chrome 浏览器版本不匹配 你需要确保你正在…

安卓:JzvdStd——网络视频播放器

目录 一、JzvdStd介绍 JzvdStd的特点和功能&#xff1a; JzvdStd常用方法&#xff1a; 二、JzvdStd使用 1、补充知识&#xff1a; 例子&#xff1a; MainActivity &#xff1a; VideoPageAdapter &#xff1a; activity_main&#xff1a; video_page&#xff1a; …

第十次CCF计算机软件能力认证

第一题&#xff1a;分蛋糕 小明今天生日&#xff0c;他有 n 块蛋糕要分给朋友们吃&#xff0c;这 n 块蛋糕&#xff08;编号为 1 到 n&#xff09;的重量分别为 a1,a2,…,an。 小明想分给每个朋友至少重量为 k 的蛋糕。 小明的朋友们已经排好队准备领蛋糕&#xff0c;对于每个朋…