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标签相关推荐
- 预格式化文本pre标签
pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. < pre > 标签的一个常见应用就是用来表示计算机的源代码. 演示 & ...
- HTML——格式化文本标记、拼音/音标注释ruby 标记和rt/rp 标记、段落缩进标记blockquote、预格式化标记pre
格式化文本标记 文本修饰标 标记 说明 <b>软件工程专业!</b> 定义粗体 <i>软件工程专业!</i> 定义斜体 <u>软件工程专业! ...
- html加拼音注释,HTML——格式化文本标记、拼音/音标注释ruby 标记和rt/rp 标记、段落缩进标记blockquote、预格式化标记pre...
格式化文本标记 文本修饰标 标记 说明 软件工程专业! 定义粗体 软件工程专业! 定义斜体 软件工程专业! 定义下划线 软件工程专业! 定义删除线 软件工程专业! 定义上标 软件工程专业! 定义下标 ...
- html width字符数,HTML pre标签 width 属性
HTML 标签 width 属性 定义和用法 HTML5 不支持 width 属性.请使用 CSS 代替. 在 HTML 4.01 中, 的 width 属性 已废弃. width 属性规定每行的最大 ...
- HTML格式化文本标记
本文是我在工作和学习过程中用过的格式化文本标签,还有一些可能会用到的格式化文本标签,记录下来方便日后查阅. <b>定义粗体</b> <i>定义斜体</i> ...
- 前端学习(172):格式化文本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
- css——pre标签
预格式化文本,一般用来存放计算机代码等可以用 1:保留空白同时折行: pre {white-space: pre-wrap;} 2:既不折行也无滚动条,保持默认的容器宽度,但是允许它在交互的时候展开: ...
- < pre >标签 定义预格式化的文本
HTML < pre > 标签 - - - 定义预格式化的文本 标签中的文本会保留空格和换行符 <!DOCTYPE html> <html><head> ...
- html中文本格式化、预格式化、计算机输出标签、address、title、文字方向、著作
文本格式化标签: 预格式化标签pre: 网页中文本默认是显示一行,没有格式,通过<pre></pre>标签包裹会显示默认的格式. <pre> <!-- 通过p ...
最新文章
- RNA-seq分析-数据库
- 根据时间比较选择数据
- 百雀羚、林清轩、逐本走红背后,植物基护肤品的春天来了?
- YaoCCAD软件中设置坐标原点
- 组件面板 html 页面,Html - Bootstrap Panel面板
- 内置锁的能力不足以满足需求
- 程序员的自我修养(2)——计算机网络
- python语言指令大全_Python语言----linux常用命令(14)
- java上传、下载、删除ftp文件
- MyBatis集合Spring(四)之使用Spring处理事务
- Canon600D入手记
- php jmail,PHP利用Jmail组件实现发送邮件
- 【Python计量】statsmodels对虚拟变量进行回归
- 第1周练习 货币转换 I
- mac下编译安卓源码
- 失业培训计算机试题,2017年职称计算机考试考前练习试题(11)
- Mac触控板设置以及使用
- 算法设计与分析: 2-7 士兵站队问题
- 3星|《财经》2017年第24期:中药注射液生死劫
- VisionMaster 学习笔记(USB 孔定位)
热门文章
- c语言编译器IDE怎么,C语言编译器和IDE的选择
- 施密特正交方法例题(用于学习)
- 笔记:springboot-admin 整合spring security应用注册失败问题
- C#.NET 国密数字信封 民生银行
- 物联网设备管理的未来
- 中国石油大学(华东)计算机与通信工程学院,2019年中国石油大学(华东)计算机与通信工程学院考研复试分数线...
- java.lang.IllegalStateException: getWriter() has already been called for this response问题解决
- 计算机专业qs国内大学,qs计算机专业大学排名
- 毕业设计-基于BP神经网络预测系统的设计- MATLAB
- 文本话题聚类(Kmeans/LDA)