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

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

汉仪雅酷黑WHYYaKuHeiW

汉仪大黑简HYDaHeiJ

汉仪尚魏手书WHYShangWeiShouShuW

版权字体(方正)

字体中文名字体英文名字体应用
方正粗雅宋简体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并发的基石&#xff1f; 二、LockSupport的用途 2.1 LockSupport的主要方法 2.2 使用案例 2.3 总结 三、LockSupport 源码分析 3.1 学习原理前的前置知识 3.1.1 Unsafe.park()和Unsafe.unpark() 3.1.2wait和notify/notify…...

元宇宙之声:新鸿基公司

在本期节目中&#xff0c;新鸿基团队讲述了他们在农历新年季中展示的元宇宙最新创作&#xff01; 为什么将体验命名为「乘风启航」&#xff1f;什么是 「Scallywag」&#xff1f; 香港专业离岸帆船队新鸿基 Scallywag 队由新鸿基公司赞助&#xff0c;其团队精神与公司的精神相呼…...

Linux中定时监控Tomcat服务器进程并在进程结束时重启Tomcat服务器

目录一、问题二、解决方法1、创建定时任务文件2、修改Tomcat的部分文件3、添加系统的定时调度4、执行monitor.sh文件5、查看脚本执行的日志文件一、问题 当我们的Tomcat配置完成后投入使用后&#xff0c;在用户使用一定时间后&#xff0c;Tomcat可能会出现一些问题导致进程结束…...

快速部署私有云笔记,免费享受多端同步

一、老Q笔记之一路坎坷 市面上的笔记软件非常多&#xff0c;有些是本地编辑功能特别强大但是不支持云同步&#xff0c;有些是支持上云但是编辑功能不够完善。选择一款合适的云笔记软件&#xff0c;无疑能让我们工、学习的时候更加顺心、顺手。 这么多年来老Q使用过很多云笔记…...

python生成 2048位随机质数 Miller-Rabin质数测试算法

Miller-Rabin质数测试算法是一种基于随机化的算法&#xff0c;用于判断一个数是否为质数。该算法具有高效性和强健性&#xff0c;通常被用于加密算法中生成大素数。 该算法基于以下两个事实&#xff1a;对于质数ppp和任意整数aaa&#xff0c;有ap−1≡1(modp)a^{p-1} \equiv 1…...

♡ — MySQL 查询缓存

MySQL 查询缓存 执行查询语句的时候&#xff0c;会先查询缓存。MySQL 8.0 版本后移除&#xff0c;因为这个功能不太实用。 my.cnf 加入以下配置&#xff0c;重启 MySQL 开启查询缓存&#xff1a; query_cache_type1 query_cache_size600000MySQL 执行以下命令也可以开启查询缓…...

死锁检测组件 -- 使用hook检测死锁

目录 hook hook是什么 dlsym()函数 hook的实现步骤 加入hook的demo C/CLinux服务器开发/后台架构师【零声教育】-学习视频教程-腾讯课堂 hook hook可以把系统或第三方库提供的函数&#xff0c;替换成我们写的同名函数。会调用我们实现的函数。 hook是什么 hook提供了两…...

第2集丨Java中的数据类型汇总

目录一、数据类型分类二、基本数据类型取值范围数据类型的转换byte和char的关系三、包装类一、数据类型分类 二、基本数据类型 取值范围 比特(bit位) : 数据运算得最小存储单位字节(byte) : 数据最小存储单位bit和byte可以互相转换得&#xff0c;1 byte 8 bit位默认情况下&am…...

【基础篇】7 # 队列:队列在线程池等有限资源池中的应用

说明 【数据结构与算法之美】专栏学习笔记 什么是队列&#xff1f; 队列是一种操作受限的线性表数据结构&#xff0c;特点是先进先出&#xff0c;最基本的操作有&#xff1a;入队 enqueue()&#xff0c;放一个数据到队列尾部&#xff1b;出队 dequeue()&#xff0c;从队列头…...

matlab进行双目标定获取双目参数并打印教程

文章目录前言1.打开matlab进行双目标定2.获取想要的参数前言 在相同的标定算法和标定参数下&#xff0c;Python和Matlab的标定精度是相同的。因为标定精度主要取决于标定算法和标定参数的质量&#xff0c;而不是编程语言的选择。 不同的编程语言可能使用不同的库或实现细节&…...

JVM类加载机制

回到2018年的抖音哈哈. 回顾下&#xff1a; java开发环境: java编译运行过程: 1) 编译期&#xff1a;.java源文件&#xff0c;经过编译&#xff0c;生成.class字节码文件 2) 运行期&#xff1a;JVM加载.class并运行.class(0和1) 特点: 跨平台、一次编程,处处报错 名词解释: 1…...

8.1 优化概述

数据库性能取决于数据库级别的几个因素&#xff0c;例如表、查询和配置设置。这些软件结构导致了硬件级别的 CPU 和 I/O 操作&#xff0c;您必须将其最小化并尽可能提高效率。在研究数据库性能时&#xff0c;首先要学习软件端的高级规则和准则&#xff0c;然后使用墙上的时钟时…...

从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软件包管理工具&#xff0c;用于管理RPM软件包。DNF可以查…...

leetcode707 设计链表 带有输入和输出的

题目&#xff1a; 设计链表的实现。您可以选择使用单链表或双链表。单链表中的节点应该具有两个属性&#xff1a;val 和 next。val 是当前节点的值&#xff0c;next 是指向下一个节点的指针/引用。如果要使用双向链表&#xff0c;则还需要一个属性 prev 以指示链表中的上一个节…...

100种思维模型之非sr思维模型-012

什么是sr? sr是stimulus-response的缩写&#xff0c;意思是刺激反应。 那么非sr思维模型就是非刺激反应思维模型的意思。 今天我们来聊聊非sr思维模型——一个提醒我们思考&#xff0c;提醒我们任何时刻都有选择权的思维模型。 本文依然从三个方面进行介绍&#xff0c;何谓…...

绿竹生物再冲刺港交所上市:暂未商业化,孔健夫妇为实控人

近日&#xff0c;北京绿竹生物技术股份有限公司&#xff08;下称“绿竹生物”&#xff09;在港交所递交招股书&#xff0c;准备在港交所主板上市&#xff0c;中金公司为其独家保荐人。据贝多财经了解&#xff0c;绿竹生物曾于2022年6月28日在港交所递表。 相较于此前招股书&am…...

加拿大MSB金融牌照申请方案

什么是加拿大MSB金融牌照&#xff1f; 根据犯罪所得&#xff08;洗钱&#xff09;和恐怖主义融资法案&#xff0c;您的企业必须在加拿大金融交易和报告分析中心 (FINTRAC) 注册成为货币服务企业。自 2020 年 6 月 1 日起&#xff0c;外国货币服务企业也必须在 FINTRAC 注册&…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...