HTML预格式化文本pre标签
文章目录
- 参考
- white-space
- word-break
- font-family
参考
https://blog.csdn.net/weixin_44368963/article/details/120054949
https://www.zhangxinxu.com/wordpress/2017/03/css-font-family-chinese-english/
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
< pre > 标签的一个常见应用就是用来表示计算机的源代码。
我们经常会在要保持文本格式的时候使用pre标签，比如当我们要展示源代码的时候，只要放一个pre标签，然后把源代码直接复制，粘贴，然后在页面上就可以保持好格式。不会像放在其它标签里那样，把换行和空格都自动折叠了。
pre {word-wrap:break-word;white-space:pre;font-family:simsun;font-size:18px;overflow-x:scroll;word-break:break-all;
}
white-space
定义:用来设置如何处理元素中的 空白
white-space: normal; /*连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。 */
white-space: nowrap; /* 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。*/
white-space: pre; /* 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。*/
white-space: pre-wrap; /* 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。*/
white-space: pre-line; /* 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行。*/white-space: break-spaces;
/**与 pre-wrap的行为相同，除了：任何保留的空白序列总是占用空间，包括在行尾。每个保留的空格字符后都存在换行机会，包括空格字符之间。这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。*/white-space: inherit;
white-space: initial;
white-space: unset;
word-break
定义: CSS 属性 word-break 指定了怎样在单词内断行
属性说明:
word-break: break-all /* 对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。*/
word-break: keep-all /*CJK 文本不断行。 Non-CJK 文本表现同 normal。 */
word-break: break-word; /* non-standard */
font-family
font-family:simsun
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-family
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face
CSS font-family中文字体英文名称展示
windows常见内置中文字体
| 字体中文名 | 字体英文名 | 字体应用 |
|---|---|---|
| 宋体 | SimSun | |
| 黑体 | SimHei | |
| 微软雅黑 | Microsoft Yahei | |
| 微软正黑体 | Microsoft JhengHei | |
| 楷体 | KaiTi | |
| 新宋体 | NSimSun | |
| 仿宋 | FangSong |
OS X常见内置中文字体
| 字体中文名 | 字体英文名 | 字体应用 |
|---|---|---|
| 苹方 | PingFang SC | |
| 华文黑体 | STHeiti | |
| 华文楷体 | STKaiti | |
| 华文宋体 | STSong | |
| 华文仿宋 | STFangsong | |
| 华文中宋 | STZhongsong | |
| 华文琥珀 | STHupo | |
| 华文新魏 | STXinwei | |
| 华文隶书 | STLiti | |
| 华文行楷 | STXingkai | |
| 冬青黑体简 | Hiragino Sans GB | |
| 兰亭黑-简 | Lantinghei SC | |
| 翩翩体-简 | Hanzipen SC | |
| 手札体-简 | Hannotate SC | |
| 宋体-简 | Songti SC | |
| 娃娃体-简 | Wawati SC | |
| 魏碑-简 | Weibei SC | |
| 行楷-简 | Xingkai SC | |
| 雅痞-简 | Yapi SC | |
| 圆体-简 | Yuanti SC |
office安装后新增字体
| 字体中文名 | 字体英文名 | 字体应用 |
|---|---|---|
| 幼圆 | YouYuan | |
| 隶书 | LiSu | |
| 华文细黑 | STXihei | |
| 华文楷体 | STKaiti | |
| 华文宋体 | STSong | |
| 华文仿宋 | STFangsong | |
| 华文中宋 | STZhongsong | |
| 华文彩云 | STCaiyun | |
| 华文琥珀 | STHupo | |
| 华文新魏 | STXinwei | |
| 华文隶书 | STLiti | |
| 华文行楷 | STXingkai | |
| 方正舒体 | FZShuTi | |
| 方正姚体 | FZYaoti |
开源字体
| 字体中文名 | 字体英文名 | 字体应用 |
|---|---|---|
| 思源黑体 | Source Han Sans CN | |
| 思源宋体 | Source Han Serif SC | |
| 文泉驿微米黑 | WenQuanYi Micro Hei |
版权字体（汉仪）
| 字体中文名 | 字体英文名 | 字体应用 |
|---|---|---|
| 汉仪旗黑 | HYQihei 40S | |
| 汉仪旗黑 | HYQihei 50S | |
| 汉仪旗黑 | HYQihei 60S | |
| 汉仪大宋简 | HYDaSongJ | |
| 汉仪楷体 | HYKaiti | |
| 汉仪家书简 | HYJiaShuJ | |
| 汉仪PP体简 | HYPPTiJ | |
| 汉仪乐喵体简 | HYLeMiaoTi | |
| 汉仪小麦体 | HYXiaoMaiTiJ | |
| 汉仪程行体 | HYChengXingJ | |
| 汉仪黑荔枝 | HYHeiLiZhiTiJ | |
| 汉仪雅酷黑W | HYYaKuHeiW | |
| 汉仪大黑简 | HYDaHeiJ | |
| 汉仪尚魏手书W | HYShangWeiShouShuW |
版权字体（方正）
| 字体中文名 | 字体英文名 | 字体应用 |
|---|---|---|
| 方正粗雅宋简体 | FZYaSongS-B-GB | |
| 方正报宋简体 | FZBaoSong-Z04S | |
| 方正粗圆简体 | FZCuYuan-M03S | |
| 方正大标宋简体 | FZDaBiaoSong-B06S | |
| 方正大黑简体 | FZDaHei-B02S | |
| 方正仿宋简体 | FZFangSong-Z02S | |
| 方正黑体简体 | FZHei-B01S | |
| 方正琥珀简体 | FZHuPo-M04S | |
| 方正楷体简体 | FZKai-Z03S | |
| 方正隶变简体 | FZLiBian-S02S | |
| 方正隶书简体 | FZLiShu-S01S | |
| 方正美黑简体 | FZMeiHei-M07S | |
| 方正书宋简体 | FZShuSong-Z01S | |
| 方正舒体简体 | FZShuTi-S05S | |
| 方正水柱简体 | FZShuiZhu-M08S | |
| 方正宋黑简体 | FZSongHei-B07S | |
| 方正宋三简体 | FZSong | |
| 方正魏碑简体 | FZWeiBei-S03S | |
| 方正细等线简体 | FZXiDengXian-Z06S | |
| 方正细黑一简体 | FZXiHei I-Z08S | |
| 方正细圆简体 | FZXiYuan-M01S | |
| 方正小标宋简体 | FZXiaoBiaoSong-B05S | |
| 方正行楷简体 | FZXingKai-S04S | |
| 方正姚体简体 | FZYaoTi-M06S | |
| 方正中等线简体 | FZZhongDengXian-Z07S | |
| 方正准圆简体 | FZZhunYuan-M02S | |
| 方正综艺简体 | FZZongYi-M05S | |
| 方正彩云简体 | FZCaiYun-M09S | |
| 方正隶二简体 | FZLiShu II-S06S | |
| 方正康体简体 | FZKangTi-S07S | |
| 方正超粗黑简体 | FZChaoCuHei-M10S | |
| 方正新报宋简体 | FZNew BaoSong-Z12S | |
| 方正新舒体简体 | FZNew ShuTi-S08S | |
| 方正黄草简体 | FZHuangCao-S09S | |
| 方正少儿简体 | FZShaoEr-M11S | |
| 方正稚艺简体 | FZZhiYi-M12S | |
| 方正细珊瑚简体 | FZXiShanHu-M13S | |
| 方正粗宋简体 | FZCuSong-B09S | |
| 方正平和简体 | FZPingHe-S11S | |
| 方正华隶简体 | FZHuaLi-M14S | |
| 方正瘦金书简体 | FZShouJinShu-S10S | |
| 方正细倩简体 | FZXiQian-M15S | |
| 方正中倩简体 | FZZhongQian-M16S | |
| 方正粗倩简体 | FZCuQian-M17S | |
| 方正胖娃简体 | FZPangWa-M18S | |
| 方正宋一简体 | FZSongYi-Z13S | |
| 方正剪纸简体 | FZJianZhi-M23S | |
| 方正流行体简体 | FZLiuXingTi-M26S | |
| 方正祥隶简体 | FZXiangLi-S17S | |
| 方正粗活意简体 | FZCuHuoYi-M25S | |
| 方正胖头鱼简体 | FZPangTouYu-M24S | |
| 方正卡通简体 | FZKaTong-M19S | |
| 方正艺黑简体 | FZYiHei-M20S | |
| 方正水黑简体 | FZShuiHei-M21S | |
| 方正古隶简体 | FZGuLi-S12S | |
| 方正幼线简体 | FZYouXian-Z09S | |
| 方正启体简体 | FZQiTi-S14S | |
| 方正小篆体 | FZXiaoZhuanTi-S13T | |
| 方正硬笔楷书简体 | FZYingBiKaiShu-S15S | |
| 方正毡笔黑简体 | FZZhanBiHei-M22S | |
| 方正硬笔行书简体 | FZYingBiXingShu-S16S |
相关文章：
HTML预格式化文本pre标签
文章目录参考white-spaceword-breakfont-family参考 https://blog.csdn.net/weixin_44368963/article/details/120054949 https://www.zhangxinxu.com/wordpress/2017/03/css-font-family-chinese-english/ pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留…...
基于机器学习的心脏病预测方法（11）——梯度提升机（GBM）
一、梯度提升机介绍 GBM（Gradient Boosting Machine）算法是Boosting(提升)算法的一种。主要思想是，串行地生成多个弱学习器，每个弱学习器的目标是拟合先前累加模型的损失函数的负梯度， 使加上该弱学习器后的累积模型损失往负梯度的方向减少。 且它用不同的权重将基学习器…...
Linux多版本python切换以及多版本pip对应 (cloud studio Ubuntu16.04)
linux && cloud studio && Ubuntu16.04 简单解决多版本python切换以及多版本pip对应问题 1.python2切换成python 多版本python: 更改前先查看版本号 $ python -V Python 2.7.12 $ python2 -V Python 2.7.12 $ python3 -V Python 3.5.2 通过下面的命令看到py…...
【并发编程】LockSupport源码详解
目录 一、前言 1.1 简介 1.2 为什么说LockSupport是Java并发的基石？ 二、LockSupport的用途 2.1 LockSupport的主要方法 2.2 使用案例 2.3 总结 三、LockSupport 源码分析 3.1 学习原理前的前置知识 3.1.1 Unsafe.park()和Unsafe.unpark() 3.1.2wait和notify/notify…...
元宇宙之声：新鸿基公司
在本期节目中，新鸿基团队讲述了他们在农历新年季中展示的元宇宙最新创作！ 为什么将体验命名为「乘风启航」？什么是 「Scallywag」？ 香港专业离岸帆船队新鸿基 Scallywag 队由新鸿基公司赞助，其团队精神与公司的精神相呼…...
Linux中定时监控Tomcat服务器进程并在进程结束时重启Tomcat服务器
目录一、问题二、解决方法1、创建定时任务文件2、修改Tomcat的部分文件3、添加系统的定时调度4、执行monitor.sh文件5、查看脚本执行的日志文件一、问题 当我们的Tomcat配置完成后投入使用后，在用户使用一定时间后，Tomcat可能会出现一些问题导致进程结束…...
快速部署私有云笔记，免费享受多端同步
一、老Q笔记之一路坎坷 市面上的笔记软件非常多，有些是本地编辑功能特别强大但是不支持云同步，有些是支持上云但是编辑功能不够完善。选择一款合适的云笔记软件，无疑能让我们工、学习的时候更加顺心、顺手。 这么多年来老Q使用过很多云笔记…...
python生成 2048位随机质数 Miller-Rabin质数测试算法
Miller-Rabin质数测试算法是一种基于随机化的算法，用于判断一个数是否为质数。该算法具有高效性和强健性，通常被用于加密算法中生成大素数。 该算法基于以下两个事实：对于质数ppp和任意整数aaa，有ap−1≡1(modp)a^{p-1} \equiv 1…...
♡ — MySQL 查询缓存
MySQL 查询缓存 执行查询语句的时候，会先查询缓存。MySQL 8.0 版本后移除，因为这个功能不太实用。 my.cnf 加入以下配置，重启 MySQL 开启查询缓存： query_cache_type1 query_cache_size600000MySQL 执行以下命令也可以开启查询缓…...
死锁检测组件 -- 使用hook检测死锁
目录 hook hook是什么 dlsym()函数 hook的实现步骤 加入hook的demo C/CLinux服务器开发/后台架构师【零声教育】-学习视频教程-腾讯课堂 hook hook可以把系统或第三方库提供的函数，替换成我们写的同名函数。会调用我们实现的函数。 hook是什么 hook提供了两…...
第2集丨Java中的数据类型汇总
目录一、数据类型分类二、基本数据类型取值范围数据类型的转换byte和char的关系三、包装类一、数据类型分类 二、基本数据类型 取值范围 比特(bit位) : 数据运算得最小存储单位字节(byte) : 数据最小存储单位bit和byte可以互相转换得，1 byte 8 bit位默认情况下&am…...
【基础篇】7 # 队列：队列在线程池等有限资源池中的应用
说明 【数据结构与算法之美】专栏学习笔记 什么是队列？ 队列是一种操作受限的线性表数据结构，特点是先进先出，最基本的操作有：入队 enqueue()，放一个数据到队列尾部；出队 dequeue()，从队列头…...
matlab进行双目标定获取双目参数并打印教程
文章目录前言1.打开matlab进行双目标定2.获取想要的参数前言 在相同的标定算法和标定参数下，Python和Matlab的标定精度是相同的。因为标定精度主要取决于标定算法和标定参数的质量，而不是编程语言的选择。 不同的编程语言可能使用不同的库或实现细节&…...
JVM类加载机制
回到2018年的抖音哈哈. 回顾下： java开发环境: java编译运行过程: 1) 编译期：.java源文件，经过编译，生成.class字节码文件 2) 运行期：JVM加载.class并运行.class(0和1) 特点: 跨平台、一次编程,处处报错 名词解释: 1…...
8.1 优化概述
数据库性能取决于数据库级别的几个因素，例如表、查询和配置设置。这些软件结构导致了硬件级别的 CPU 和 I/O 操作，您必须将其最小化并尽可能提高效率。在研究数据库性能时，首先要学习软件端的高级规则和准则，然后使用墙上的时钟时…...
从0到1一步一步玩转openEuler--14 openEuler DNF(YUM)配置管理
文章目录14.1 DNF配置文件14.1.1 配置main部分14.1.2 配置repository部分14.1.3 显示当前配置14.2 创建本地软件源仓库14.3 添加、启用和禁用软件源14.3.1 添加软件源14.3.2 禁用软件源14.3.3 启用软件源DNF是一款Linux软件包管理工具，用于管理RPM软件包。DNF可以查…...
leetcode707 设计链表 带有输入和输出的
题目： 设计链表的实现。您可以选择使用单链表或双链表。单链表中的节点应该具有两个属性：val 和 next。val 是当前节点的值，next 是指向下一个节点的指针/引用。如果要使用双向链表，则还需要一个属性 prev 以指示链表中的上一个节…...
100种思维模型之非sr思维模型-012
什么是sr? sr是stimulus-response的缩写，意思是刺激反应。 那么非sr思维模型就是非刺激反应思维模型的意思。 今天我们来聊聊非sr思维模型——一个提醒我们思考，提醒我们任何时刻都有选择权的思维模型。 本文依然从三个方面进行介绍，何谓…...
绿竹生物再冲刺港交所上市：暂未商业化，孔健夫妇为实控人
近日，北京绿竹生物技术股份有限公司（下称“绿竹生物”）在港交所递交招股书，准备在港交所主板上市，中金公司为其独家保荐人。据贝多财经了解，绿竹生物曾于2022年6月28日在港交所递表。 相较于此前招股书&am…...
加拿大MSB金融牌照申请方案
什么是加拿大MSB金融牌照？ 根据犯罪所得（洗钱）和恐怖主义融资法案，您的企业必须在加拿大金融交易和报告分析中心 (FINTRAC) 注册成为货币服务企业。自 2020 年 6 月 1 日起，外国货币服务企业也必须在 FINTRAC 注册&…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
站群服务器的应用场景都有哪些？
站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...
es6+和css3新增的特性有哪些
一：ECMAScript 新特性（ES6） ES6 (2015) - 革命性更新 1，记住的方法，从一个方法里面用到了哪些技术 1，let /const块级作用域声明2，**默认参数**：函数参数可以设置默认值。3&#x…...
【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验
2024年初，人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目（一款融合大型语言模型能力的云端AI编程IDE）时，技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力，TRAE在WayToAGI等…...
初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)
零、关于开发思路 （一）拿到工作任务，先理清楚需求 1.逻辑部分 不放过原型里说的每一句话，有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分（含国际化） 整体看过需要开发页面的原型后，分类一下哪些组件/样式可以复用，直接提取出来使用 (时间充分的前提下，不…...