文章目录

  • 参考
  • 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标签相关推荐

  1. 预格式化文本pre标签

    pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. < pre > 标签的一个常见应用就是用来表示计算机的源代码. 演示 & ...

  2. HTML——格式化文本标记、拼音/音标注释ruby 标记和rt/rp 标记、段落缩进标记blockquote、预格式化标记pre

    格式化文本标记 文本修饰标 标记 说明 <b>软件工程专业!</b> 定义粗体 <i>软件工程专业!</i> 定义斜体 <u>软件工程专业! ...

  3. html加拼音注释,HTML——格式化文本标记、拼音/音标注释ruby 标记和rt/rp 标记、段落缩进标记blockquote、预格式化标记pre...

    格式化文本标记 文本修饰标 标记 说明 软件工程专业! 定义粗体 软件工程专业! 定义斜体 软件工程专业! 定义下划线 软件工程专业!  定义删除线 软件工程专业! 定义上标 软件工程专业! 定义下标 ...

  4. html width字符数,HTML pre标签 width 属性

    HTML 标签 width 属性 定义和用法 HTML5 不支持 width 属性.请使用 CSS 代替. 在 HTML 4.01 中, 的 width 属性 已废弃. width 属性规定每行的最大 ...

  5. HTML格式化文本标记

    本文是我在工作和学习过程中用过的格式化文本标签,还有一些可能会用到的格式化文本标签,记录下来方便日后查阅. <b>定义粗体</b> <i>定义斜体</i> ...

  6. 前端学习(172):格式化文本

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...

  7. css——pre标签

    预格式化文本,一般用来存放计算机代码等可以用 1:保留空白同时折行: pre {white-space: pre-wrap;} 2:既不折行也无滚动条,保持默认的容器宽度,但是允许它在交互的时候展开: ...

  8. < pre >标签 定义预格式化的文本

    HTML < pre > 标签 - - - 定义预格式化的文本 标签中的文本会保留空格和换行符 <!DOCTYPE html> <html><head> ...

  9. html中文本格式化、预格式化、计算机输出标签、address、title、文字方向、著作

    文本格式化标签: 预格式化标签pre: 网页中文本默认是显示一行,没有格式,通过<pre></pre>标签包裹会显示默认的格式. <pre> <!-- 通过p ...

最新文章

  1. RNA-seq分析-数据库
  2. 根据时间比较选择数据
  3. 百雀羚、林清轩、逐本走红背后,植物基护肤品的春天来了?
  4. YaoCCAD软件中设置坐标原点
  5. 组件面板 html 页面,Html - Bootstrap Panel面板
  6. 内置锁的能力不足以满足需求
  7. 程序员的自我修养(2)——计算机网络
  8. python语言指令大全_Python语言----linux常用命令(14)
  9. java上传、下载、删除ftp文件
  10. MyBatis集合Spring(四)之使用Spring处理事务
  11. Canon600D入手记
  12. php jmail,PHP利用Jmail组件实现发送邮件
  13. 【Python计量】statsmodels对虚拟变量进行回归
  14. 第1周练习 货币转换 I
  15. mac下编译安卓源码
  16. 失业培训计算机试题,2017年职称计算机考试考前练习试题(11)
  17. Mac触控板设置以及使用
  18. 算法设计与分析: 2-7 士兵站队问题
  19. 3星|《财经》2017年第24期:中药注射液生死劫
  20. VisionMaster 学习笔记(USB 孔定位)

热门文章

  1. c语言编译器IDE怎么,C语言编译器和IDE的选择
  2. 施密特正交方法例题(用于学习)
  3. 笔记:springboot-admin 整合spring security应用注册失败问题
  4. C#.NET 国密数字信封 民生银行
  5. 物联网设备管理的未来
  6. 中国石油大学(华东)计算机与通信工程学院,2019年中国石油大学(华东)计算机与通信工程学院考研复试分数线...
  7. java.lang.IllegalStateException: getWriter() has already been called for this response问题解决
  8. 计算机专业qs国内大学,qs计算机专业大学排名
  9. 毕业设计-基于BP神经网络预测系统的设计- MATLAB
  10. 文本话题聚类(Kmeans/LDA)