0x00 前言简述
描述: 通过前面几章的学习，相信大家已经对CSS有了一个简单的了解吧，现在我们又回到使用频率较高的 文本 text、图像 images、表单 table 等元素CSS样式的设置，此章节主要讲解针对文本的相关CSS属性以其使用的示例演示。
若对前面学习的知识还不熟悉的可访问《#全栈工程师修炼指南》专栏加深学习，若对你学习有帮助，还请多多支持作者创作。
通过本章将学习如下文本属性，您可以改变文本的颜色、文本及其他元素宽高尺寸、文本方向、对齐文本、文本进行缩进、字符间距、文本装饰以及文本大小和字体等。
文本样式相关属性:
代码语言：javascript复制# 文本颜色
color: 设置文本颜色
# 元素尺寸
height: 元素高度
max-height: 元素最大高度
min-height: 元素最小高度
width: 元素宽度
max-width: 元素最大宽度
min-width: 元素最小宽度
# 文本方向
writing-mode: 书写模式
direction: 文本方向
unicode-bidi: 处理文档中的双书写方向文本（bidirectional text）
# text-*
text-align: 文本水平对齐方式
text-justify：定义两端对齐时的方法
text-indent: 文本首行缩进
text-shadow: 文本阴影
text-transform: 控制元素中的字母大小写
text-decoration: 设置文本上的装饰性线条的外观
text-emphasis: 设置文本上的标记
text-orientation: 设定行中字符的方向
text-rendering: 定义浏览器渲染引擎如何渲染字体
text-wrap: 控制换行元素中的文本。
# font-*
font: 用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。
font-style：设置字体样式
font-family: 设置文本字体
font-size：设置字体大小
font-weight：设置字体的粗细程度
font-variant: 设置可变字体
# line-*
line-height: 文本行高
line-break: 处理断开（break lines）带有标点符号的中文、日文或韩文（CJK）文本的行
# 间距设置
letter-spacing: 设置文本字符的间距表现
word-spacing: 设置文本单词的间距表现
# 字符处理
white-space: 处理空白子符
word-break：处理单词间带有标点符号的中文、日文或韩文（CJK）文本的断行表现
0x01 文本样式属性介绍
color 属性 - 文本颜色设置
描述: color 属性规定文本的前景色（在 HTML 表现中，就是元素文本的颜色），请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性
温馨提示：光栅图像不受 color 影响，这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
语法参数:
代码语言：javascript复制/* 语法 */
color: [color_name|hex_number|rgb_number|inherit]
/* 参数 */
color_name：颜色名称 (比如: red)
hex_number：十六进制的颜色 (比如: #ff0000 / #f00 )
rgb_number：rgb代码的颜色 (比如: rgb(255,0,0) )
示例演示:
代码语言：javascript复制<style type="text/css">
body { color:red; }
h1 { color:#00ff00; }
p.id { color:rgb(0,0,255); }
</style>
<h1>这是 heading 1</h1>
<p>这是一段普通的段落。请注意，该段落的文本是红色的，在 body 选择器中定义了本页面中的默认文本颜色。</p>
<p class="id">该段落定义了 class="id"，该段落中的文本是蓝色的。</p>
width/height 属性 - 元素宽度与高度设置
- height 属性设置元素的高度，定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距，行内非替换元素会忽略这个属性。
- width 属性设置元素的宽度：定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距，行内非替换元素会忽略这个属性。
语法参数:
代码语言：javascript复制width|height : auto | length | % | inherit
max/min-width 属性 - 设置元素的最大/最小宽度
max/min-height 属性 - 设置元素的最大/最小高度
- max-width 属性值会对元素的
宽度设置一个最高限制，因此元素可以比指定值窄，但不能比其宽。不允许指定负值。 - min-width 属性值会对元素的
宽度设置一个最低限制。因此，元素可以比指定值宽，但不能比其短。不允许指定负值。 - max-height 属性值会对元素的
高度设置一个最高限制，因此，元素可以比指定值矮，但不能比其高，不允许指定负值。 - min-height 属性值会对元素的
高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。
综合示例演示:
代码语言：javascript复制<style type="text/css">
p.width {width: 50%;background-color:black;color:white;}
div > img{height: 120px;float:right;}
</style>
<div>
<p class="width">宽度是页面的50%, 白字黑底</p>
<img src="/i/eg_smile.gif" />
</div>
writing-mode 属性 - 书写模式
direction 属性 - 文本排列方向
描述: 我们可以根据需要设置不同方向的文本或者元素，包括从右到左，也包括从上到下的文本，不同的方向属性被称为书写模式(指文本的排列方向是横向还是纵向的)。
writing-mode属性：实际上定义了文本水平或垂直排布以及在块级元素中文本的行进方向，在块布局、内联布局中有不同效果。direction属性：实际上用于设置文本、表格列和水平溢出的方向, 对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 rtl；对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为 ltr。
语法参数:
代码语言：javascript复制# 语法参数:
writing-mode = horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
# horizontal-tb : 对于左对齐（ltr）文本，内容从左到右水平流动
# vertical-rl : 对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。
# vertical-lr: 对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。
# sideways-rl ：对于左对齐（ltr）文本，内容从下到上垂直流动，对于右对齐（rtl）文本，内容从上到下垂直流动。
# sideways-lr ：对于左对齐（ltr）文本，内容从上到下垂直流动。对于右对齐（rtl）文本，内容从下到上垂直流动。
# 语法参数:
direction: ltr | rtl;
# ltr ：可设置文本和其他元素的默认方向是从左到右（默认属性）。
# rtl ：可设置文本和其他元素的默认方向是从右到左。
温馨提示: 文本方向通常在文档中定义（例如，使用 HTML 的 dir 属性 属性），而不是通过直接使用 direction 属性来定义, 并且如果要使 direction 属性在行级元素上生效，unicode-bidi 属性的值必须是 embed 或 override。
示例演示:示例1.分别设置标题文本元素是竖向或者横向显示。
代码语言：javascript复制<style>
/* 文本方向是纵向的，块流向从右向左 --> */
h1 { writing-mode: vertical-rl; }
/* 文本方向是纵向的，块流向从左向右 --> */
h2 { writing-mode: vertical-lr; }
/* 文本方向是横向的，块流向从上至下 --> */
h3 { writing-mode: horizontal-tb; }
</style>
<div class="wrapper">
<div class="box horizontal">
<h3>文本横向 | 作者: WeiyiGeek</h3>
</div>
<div class="box vertical" style="height: 150px;">
<h1 style="display: inline;">1.WeiyiGeek 文本纵向 </h1>
<h2 style="display: inline;">2.WeiyiGeek 文本纵向 </h2>
</div>
</div>
执行结果:
示例2.使用.每个单元格展示了不同的 writing-mode 的文本。
代码语言：javascript复制<style>
table {
border-collapse: collapse;
}
td,th {
border: 1px black solid;
padding: 3px;
}
th {
background-color: lightgray;
}
.example {
height: 75px;
width: 75px;
}
.example.Text1 span,.example.Text1 {
writing-mode: horizontal-tb;
}
.example.Text2 span,.example.Text2 {
writing-mode: vertical-lr;
}
.example.Text3 span,.example.Text3 {
writing-mode: vertical-rl;
}
.example.Text4 span,.example.Text4 {
writing-mode: sideways-lr;
}
.example.Text5 span,.example.Text5 {
writing-mode: sideways-rl;
}
</style>
<table>
<tr>
<th>值</th>
<th>竖排文本</th>
<th>横排文本（从左到右）</th>
<th>横排文本（从右到左）</th>
<th>混合文本</th>
</tr>
<tr>
<td>horizontal-tb</td>
<td class="example Text1"><span>我喜欢研究计算机技术</span></td>
<td class="example Text1"><span>Example text</span></td>
<td class="example Text1"><span>weiyigeek.top</span></td>
<td class="example Text1"><span>2023年10月13日</span></td>
</tr>
<tr>
<td>vertical-lr</td>
<td class="example Text2"><span>我喜欢研究计算机技术</span></td>
<td class="example Text2"><span>Example text</span></td>
<td class="example Text2"><span>weiyigeek.top</span></td>
<td class="example Text2"><span>2023年10月13日</span></td>
</tr>
<tr>
<td>vertical-rl</td>
<td class="example Text3"><span>我喜欢研究计算机技术</span></td>
<td class="example Text3"><span>Example text</span></td>
<td class="example Text3"><span>weiyigeek.top</span></td>
<td class="example Text3"><span>2023年10月13日</span></td>
</tr>
<tr>
<td>sideways-lr</td>
<td class="example Text4"><span>我喜欢研究计算机技术</span></td>
<td class="example Text4"><span>Example text</span></td>
<td class="example Text4"><span>weiyigeek.top</span></td>
<td class="example Text4"><span>2023年10月13日</span></td>
</tr>
<tr>
<td>sideways-rl</td>
<td class="example Text5"><span>我喜欢研究计算机技术</span></td>
<td class="example Text5"><span>Example text</span></td>
<td class="example Text5"><span>weiyigeek.top</span></td>
<td class="example Text5"><span>2023年10月13日</span></td>
</tr>
</table>
执行效果:
示例 3.设置文本方向，但是通常不会如此使用。
代码语言：javascript复制<style>
p.lr { direction: ltr;}
p.rl { direction: rtl;}
</style>
<p class="lr">left - 文本向左方向</p> <!--尾部的符号会提前-->
<p class="rl">right - 文本向右方向</p>
unicode-bidi 属性 - 处理文档中的双书写方向文本（bidirectional text）
描述: CSS unicode-bidi 属性 和 direction 属性，决定如何处理文档中的双书写方向文本（bidirectional text）, 且是仅有的两个不受 all 简写影响的属性。
比如，如果一块内容同时包含有从左到右书写和从右到左书写的文本，那么用户代理（the user-agent）会使用复杂的 Unicode 算法来决定如何显示文本。unicode-bidi 属性会覆盖此算法，允许开发人员控制文本嵌入（text embedding）。
语法参数:
代码语言：javascript复制/* 可用关键字 */
unicode-bidi: normal; /* 此元素不提供额外的嵌入级别, 对于内联元素，隐式的重新排序在元素的边界上起作用。 **/
unicode-bidi: embed; /* 对于内联元素，该值会为双向算法打开一个额外的嵌入级别。 */
unicode-bidi: isolate; /* 计算元素容器的方向时，不考虑这个元素的内容。*/
unicode-bidi: bidi-override; /* 对于内联元素，该值会创建一个覆盖；对于块容器元素，该值将为不在另一个块容器元素内的内联级别的后代创建一个覆盖。*/
unicode-bidi: isolate-override; /* 将 isolate 关键字的隔离行为应用于周围的内容，并将 bidi-override 关键字的覆盖行为应用于内部内容。 */
unicode-bidi: plaintext; /* 在计算元素方向的时候，不考虑父元素的双向状态，也不考虑 direction 属性的值。 */
示例演示:
- 示例1.direction 属性 与 unicode-bidi 属性联合演示。
<style>
.bible-quote {
direction: rtl;
unicode-bidi: embed;
}
</style>
<!-- 温馨提示: 符号会移动到最右边。 -->
<div class="bible-quote">作者博客:</div>
<div>https://blog.weiyigeek.top</div>
执行结果:
text-align | text-align-last - 文本对齐位置
描述: 介绍两种对齐方式属性，前者 text-align 是用来指定行内元素（inline）或表格单元格（table-cell）元素的水平对齐方式， 而 text-align-last 指定一行或者块中的最后一行在被强制换行之前的对齐规则。
语法参数:
代码语言：javascript复制/* 语法参数: */
text-align: start、end、left、right、center、justify、justify-all 或 match-parent、<string>
text-align-last: start、end、left、right、center、justify、justify-all 或 match-parent、<string>
* start：如果内容方向是左至右，则等于 left，反之则为 right。
* end：如果内容方向是左至右，则等于 right，反之则为 left。
* center: 居中对齐
* justify：文字向两侧对齐，对最后一行无效。
* justify-all 实验性: 与 justify 一致，但是强制使最后一行两端对齐。
* match-parent： 和 inherit 类似，区别在于 start 和 end 的值根据父元素的 direction 确定，并被替换为恰当的 left 或 right 值。
* <string> 实验性：应用在单元格时，指定单元格内容相对于哪个字符对齐。
/* 扩展 */
/* 在表格列内基于字符的对齐 */
text-align: ".";
text-align: "." center;
/* 块对齐值（非标准语法） */
text-align: -moz-center;
text-align: -webkit-center;
text-justify 属性 - 当文本为justify对齐时的齐行方法
描述: 定义的是当文本的 text-align 属性被设置为 :justify 时的齐行方法。
语法参数:
代码语言：javascript复制/* 语法: */
text-justify: none; auto; inter-word; inter-character;
/* 参数： */
* none: 表示关闭掉齐行的设置, 表现的效果和没有设置 text-align 一样，当你因为某种原因需要在已经设置了 text-align 的元素上禁用齐行效果的时候，这个属性值很有用。
* auto: 默认值，浏览器根据显示的效果和质量来确定符合当前状态的最佳对齐方式，当然这种对齐方式将是最适合某种语言文字的排版（例如：英语，中文，日语，韩语等）。如果没有对 text-justify 进行设置的话，则是默认使用这样子的对齐规则。
* inter-word: 通过在文本中的单词之间添加空间来实现行对齐（这将会改变 word-spacing 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。
* inter-character: 通过在文本中的字符之间添加空间来实现行对齐（这将会改变 letter-spacing 的值），比如日语就是最适合使用这个属性的语言。
* distribute 已弃用：显示效果与设置了 inter-word 一致，不提倡使用这个属性。
text-indent 属性 - 定义文本缩进
描述: 定义一个块元素首行文本内容之前的缩进量，以实现文章排版。
语法参数:
代码语言：javascript复制/* 语法 */
text-indent = <length> | <percentage> | each-line | hanging
* each-line 实验性: 文本缩进会影响第一行，以及使用<br>强制断行后的第一行。
* hanging 实验性: 该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。
/* 关键字使用 */
/* <length> 长度值 */
text-indent: 3mm;
text-indent: 40px;
/* <percentage>百分比值取决于其包含块（containing block）的宽度*/
text-indent: 15%;
/* 关键字 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;
text-shadow 属性 - 添加文本阴影
描述: 此属性为文字添加阴影，可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开，每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。
语法参数:
代码语言：javascript复制/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* 参数 */
<color> ： 阴影的颜色，可以在偏移量之前或之后指定 （可选）
<offset-x> <offset-y> ：指定阴影相对文字的偏移量，前置水平量、后者垂直偏移量。
<blur-radius>：指定模糊效果，其值越大，模糊半径越大，阴影也就越大越淡。
text-transform 属性 - 控制元素中的字母大小写
描述: 此属性指定如何将元素的文本大写，它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。
语法参数:
代码语言：javascript复制/* 语法 */
text-transform: none; capitalize; uppercase; lowercase; full-width; full-size-kana;
/* 参数 */
none: 阻止所有字符的大小写被转换。
capitalize：强制每个单词的首字母转换为大写
uppercase：强制所有字符被转换为大写。
lowercase：强制所有字符被转换为小写。
full-width: 强制将字符（主要是表意文字和拉丁文字））--写在一个正方形内，使它们能够在通常的东亚文字（如中文或日文）中对齐。
full-size-kana: 将所有小假名字符转换为等效的全尺寸假名，以补偿在 ruby 中通常使用的小字体的可读性问题。
text-decoration 属性 - 设置文本上的装饰性线条的外观
描述: 此属性设置文本上的装饰性线条的外观, 它是 text-decoration-line、text-decoration-color、text-decoration-style 和较新的 text-decoration-thickness 属性的缩写。
语法参数:
代码语言：javascript复制/* 语法 */
text-decoration: line color style thickness
/* 参数 */
* text-decoration-line: 设置使用的装饰类型，例如 underline 或者 line-through。
* text-decoration-color: 设置装饰的颜色。
* text-decoration-style: 设置装饰的线条的颜色，例如 solid、wavy 或者 dashed。
* text-decoration-thickness: 设置用于装饰的线条粗细。
text-emphasis 属性 - 设置文本上的装饰标识
描述: 此属性强调标记应用于文本（空格和控制字符除外）, 它是 text-emphasis-style 和 text-emphasis-color 属性的缩写。
语法参数:
代码语言：javascript复制/* 语法 */
text-decoration: multi-style color
/* 参数 */
* none：没有强调标记
* filled: 纯色填充
* open：形状是中空的
* dot：将小圆圈显示为标记
* circle：将大圆圈显示为标记
* double-circle：将双圆显示为标记，填充的双圆圈为'◉' （U 25C9），开放的双圆为'◎' （U 25CE）
* triangle: 将三角形显示为标记, 例如: '▲' (U 25B2) 或者 '△' (U 25B3)
* sesame: 将显示芝麻(sesames)的形状，例如：'﹅' (U FE45) 或者 '﹆' (U FE46)
* <string>：显示给定的字符标记
text-orientation 属性 - 设定行中字符的方向
描述: 此属性设定行中字符的方向，但它仅影响纵向模式（当 writing-mode 的值不是horizontal-tb）下的文本, 此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头。
语法参数:
代码语言：javascript复制/* 语法 */
text-orientation = mixed | upright | sideways
/* 参数 */
mixed：默认值。顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局。
upright：将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts），注意这个关键字会导致所有字符被视为从左到右，也就是 direction 被强制设为 ltr。
sideways：所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转 90°。
sideways-right：处于兼容目的，sideways 的别名。
use-glyph-orientation：对于 SVG 元素，这个关键字导致使用已弃用的 SVG 属性。
text-orientation 属性 - 定义有溢出内容隐藏的标识
描述：此属性用于确定如何提示用户存在隐藏的溢出内容，其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。
温馨提示：此属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，你需要在元素上添加几个额外的属性：overflow 和 white-space。
语法参数:
代码语言：javascript复制/* 语法 */
text-overflow = clip | ellipsis | <string> | fade | fade( <length> | <percentage> )
/* 参数 */
clip ： 默认值，处截断文本。
ellipsis：以省略号来表示被截断的文本。
<string>: 指定字符表示被截断的文本(火狐浏览器中生效)。
fade: 将会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。
fade( <length> | <percentage> ): 同上只不过参数决定淡出特效的距离，<percentage> 以行宽而定。小于 0 的值视为 0。大于行宽的值视为行宽。
text-rendering 属性 - 定义浏览器渲染引擎如何渲染字体
描述: 此属性定义浏览器渲染引擎如何渲染字体，浏览器会在速度、清晰度、几何精度之间进行权衡。
语法参数:
代码语言：javascript复制/* 自行判断，在绘制文本时，何时该优化速度，易读性或者几何精度 */
text-rendering: auto;
/* 浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度，它会使字间距和连字无效。 */
text-rendering: optimizeSpeed;
/* 浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度，可能在移动设备上会造成比较明显的性能问题 */
text-rendering: optimizeLegibility;
/* 浏览器在绘制文本时将着重考虑几何精度，而不是渲染速度和易读性。 */
text-rendering: geometricPrecision;
text-wrap 属性 - 控制如何换行元素中的文本
描述: 此属性控制如何换行元素中的文本，可用于排版方面的改进，例如，在断开的标题之间更平衡的行长度，以及一种完全关闭文本换行的方法。
语法参数:
代码语言：javascript复制# 文本以适当的字符换行（例如空格，在英语等使用空格分隔符的语言中），以最大限度地减少溢出, 默认值
text-wrap: wrap;
# 文本不换行，它将溢出包含的元素，而不是换行。
text-wrap: nowrap;
# 文本的包装方式可以最大限度地平衡每行的字符数，从而提高布局质量和易读性
text-wrap: balance;
综合示例演示:
代码语言：javascript复制<style>
div >p:nth-of-type(1) {
font-weight: bolder;
color: red;
}
/* 示例1 */
img.top { vertical-align: text-top;}
img.bottom { vertical-align: text-bottom;}
img.middle { vertical-align: middle;}
/* 示例2 */
p.right { text-align: right; }
p.center { text-align: center; }
p.justify { text-align: justify;text-justify: inter-word; }
p.last-center {
font-size: 1.4em;
text-align: justify;
text-align-last: center;
width: 720px;
}
/* 示例3 */
p.indent { text-indent: 2em; width: 480px;}
/* 示例4 */
p.simple { text-shadow: 0 3px 3px green;}
p.multiple {
text-shadow:
1px 1px 2px black,
0 0 0.1em blue,
0 0 0.2em blue;
color: white;
}
/* 示例5 */
p.capitalize { text-transform: capitalize; }
p.uppercase { text-transform: uppercase; }
/* 示例6 */
p.under { text-decoration: underline red; }
p.over { text-decoration: wavy overline lime;}
p.line { text-decoration: line-through;}
p.plain { text-decoration: none;}
p.underover { text-decoration: dashed underline overline;}
p.thick { text-decoration: solid underline purple 4px;}
p.blink { text-decoration: blink;}
/* 示例7 */
span.double-circle { text-emphasis: filled double-circle #ffb703; }
span.custom { text-emphasis: 'x' red; }
/* 示例8 */
p.upright {
height: 150px;
writing-mode: vertical-rl;
text-orientation: upright;
border: 1px solid lightcoral;
}
/* 示例9 */
.overflow {
display: flex;
justify-content: space-around;
}
.overflow > div > p {
width: 200px;
border: 1px solid;
padding: 2px 5px;
/* Both of the following are required for text-overflow */
white-space: nowrap;
overflow: hidden;
}
p.overflow-clip { text-overflow: clip; }
p.overflow-ellipsis { text-overflow: ellipsis; }
p.overflow-string { text-overflow: " [..]"; }
.ltr > p { direction: ltr; }
.rtl > p { direction: rtl; }
</style>
<div> <p> 示例1.vertical-align 垂直对齐</p>
<div> An <img src="./frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
<div> An<img class="top" src="./frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment. </div>
<div> An <img class="bottom" src="./frame_image.svg" alt="link" width="32" height="32" />image with a text-bottom alignment.</div>
<div> An<img class="middle" src="./frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
</div>
<div> <p> 示例2.text-align | text-align-last 水平对齐</p>
<p class="right">右对齐,右对齐,右对齐,右对齐</p>
<p class="center">居中对齐,居中对齐,居中对齐,居中对齐</p>
<p class="justify">两端对齐,两端对齐,两端对齐,两端对齐</p>
<p class="last-center">指定一行或者块中的最后一行在被强制换行之前的对齐，作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
</div>
<div> <p> 示例3.text-indent 首行缩进两个字符</p>
<p class="indent">首行缩进两个字符,作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
</div>
<div> <p> 示例4.text-shadow 文本阴影</p>
<p class="simple">简单文本阴影,作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
<p class="multiple">多重文本阴影,作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
</div>
<div> <p> 示例5.text-transform 英文字母、拉丁语言大小写</p>
<p> 原始文本: weiyigeek is a computer technology enthusiast </p>
<p class="capitalize">首字母大写：weiyigeek is a computer technology enthusiast</p>
<p class="uppercase">全字母大写：weiyigeek is a computer technology enthusiast</p>
</div>
<div>
<p>示例6.text-decoration 设置文本上的装饰性线条的外观</p>
<p class="under">此文本下方有一行线。</p>
<p class="over">此文本上面有一行线。</p>
<p class="line">此文本有一条线穿过它。</p>
<p>此<a class="plain" href="#">链接不会具有下划线</a>，因为链接默认加下划线。移除锚点上的文本装饰时要小心，因为用户通常依赖下划线来表示超链接</p>
<p class="underover">此文本在其上方<em>和</em>下方都有线条。</p>
<p class="thick">在浏览器支持的情况下，此文本具有非常粗的紫色下划线。</p>
<p class="blink">此文本可能会为你闪烁，具体取决于你使用的浏览器。</p>
</div>
<div>
<p>示例7.text-emphasis 设置文本上的标记</p>
<p>此文本<span class="double-circle">weiyigeek</span>上方有一行双圆。</p>
<p>此文本<span class="custom">weiyigeek</span>上面有自定义字符标识。</p>
</div>
<div>
<p>示例8.text-orientation 设定行中字符的方向</p>
<p class="upright">weiyigeek is a computer technology enthusiast.</p>
</div>
<div class="overflow">
<p>示例9.text-overflow 存在溢出内容时显示效果。</p>
<div class="ltr">
<h2>Left to right text</h2>
<pre>clip</pre>
<p></p>
<p class="overflow-clip"> weiyigeek is a computer technology enthusiast. </p>
<pre>ellipsis</pre>
<p class="overflow-ellipsis"> weiyigeek is a computer technology enthusiast. </p>
<pre>" [..]"</pre>
<p class="overflow-string">weiyigeek is a computer technology enthusiast. </p>
</div>
<div class="rtl">
<h2>Right to left text</h2>
<pre>clip</pre>
<p></p>
<p class="overflow-clip">weiyigeek is a computer technology enthusiast.</p>
<pre>ellipsis</pre>
<p class="overflow-ellipsis">weiyigeek is a computer technology enthusiast.</p>
<pre>" [..]"</pre>
<p class="overflow-string">weiyigeek is a computer technology enthusiast.</p>
</div>
</div>
<div>
<p>示例10.text-wrap 控制如何换行元素中的文本。</p>
<p class="wrap" contenteditable="true"> The default behavior; the text in the heading wraps "normally"</p>
<p class="nowrap" contenteditable="true">In this case the text in the heading doesn't wrap, and overflows the container</p>
<p class="balance" contenteditable="true"> In this case the text in the heading is nicely balanced across lines</p>
</div>
执行结果:
weiyigeek.top-示例7~示例10图
line-height 属性 - 行高设置
描述: 此属性用于设置多行元素的空间量，如多行文本的间距（文本常规上下行高），对于块级元素，它指定元素行盒（line boxes）的最小高度，对于非替代的 inline 元素，它用于计算行盒（line box）的高度。。
语法参数:
代码语言：javascript复制line-height: normal | <number>（无单位） | <length> | <percentage>
/* Unitless values: use this number multiplied by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* <percentage> values */
line-height: 34%;
line-break 属性 - 断开带有标点符号的中文、日文或韩文（CJK）文本的行
描述: 设置 CSS 属性 line-break 可以用来处理如何断开（break lines）带有标点符号的中文、日文或韩文（CJK）文本的行。
语法参数:
代码语言：javascript复制# 语法
line-break: auto; loose; normal; strict; anywhere;
# 参数
auto: 使用默认的断行规则分解文本。
loose: 使用尽可能松散（least restrictive）的断行规则分解文本。一般用于短行的情况，如报纸。
normal: 使用最一般（common）的断行规则分解文本。
strict: 使用最严格（stringent）的断行原则分解文本。
anywhere: 在每个印刷字符单元（typographic character unit）的周围，都有一个自动换行（soft wrap）的机会，包括任何标点符号（punctuation character）或是保留的空白字符（preserved white spaces），或是单词之间。
font-style 属性 - 设置字体样式
描述: 此属性允许你选择 font-family 字体下的斜体（italic）和倾斜体（oblique）样式。
语法参数:
代码语言：javascript复制font-style: normal; /* 选择 font-family 的常规字体。 */
font-style: italic; /* 选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。*/
font-style: oblique; /* 选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（italic ）替代 */
font-style: oblique 10deg;
font-family 属性 - 设置文本字体
描述：此属性允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
语法参数：
代码语言：javascript复制/* 一个字体族名 <family-name> 和一个通用字体族名 <generic-name>*/
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* 仅有一个通用字体族名 */
serif; 带衬线字体，笔画结尾有特殊的装饰线或衬线。
sans-serif; 无衬线字体，即笔画结尾是平滑的字体。
monospace; 等宽字体，即字体中每个字宽度相同。
cursive; 草书字体, 有种手写连笔的效果。
fantasy; 具有特殊艺术效果的字体。
emoji; 专门用于呈现 Emoji 表情符号的字体。
fangsong; 汉字字体，介于宋体和楷体之间。
system-ui; 从浏览器所处平台处获取的默认用户界面字体。
ui-serif; 同上浏览器默认字体
ui-sans-serif; 同上浏览器默认字体
ui-monospace; 同上浏览器默认字体
ui-rounded; 同上浏览器默认字体
math; 针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的 double struck glyphs。
/* 简单示例 */
<p style="font-family: georgia">This is a georgia Font</p>
<p style="font-family: 微软雅黑">这是微软雅黑字体</p>
<p style="font-family: georgia,'New York',serif">more font 以,分割,当指定字体名称中有空格的时候以'字符名称,并且一般在末尾加上通用字体</p>
知识扩展: italic 文本和 oblique 文本之间的差别。
- 1）斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
- 2）与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
温馨提示: 有效的字体族名需要满足使用引号"包括的字符串,并且在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。
font-size 属性 - 设置字体大小
描述: 此属性用于设置字体大小, 更改字体大小还会更新字体大小相关的 <length> 单位，例如 em、ex 等。
温馨提示：若你没有设置字体大小，则其普通文本（）
语法参数:
代码语言：javascript复制/* <absolute-size> 值: 基于用户默认字体大小（medium）的绝对大小关键字。 */
font-size: xx-small; x-small; small; medium; large; x-large; xx-large; xxx-large;
:
/* <relative-size> 值: 基于相对大小关键字。 */
font-size: smaller;
font-size: larger;
/* <length> 值：相对于字体的单位（例如 em 和 ex），字体大小相对于父元素的字体大小。 */
font-size: 12px;
font-size: 0.8em;
/* <percentage> 值 */
font-size: 80%;
/* math 值 ：使用特殊的数学缩放规则来确定 font-size 属性的计算值。 */
font-size: math;
假设浏览器的默认 font-size 为 16px，则单词“outer”将渲染为 25.6px，但单词“inner”将渲染为 40.96px。这是因为内部 <span> 的 font-size 为 1.6em，相对于其父级的 font-size，而其父级又相对于其父级的 font-size这通常被称为复合。而为了避免复合问题，我们可以采用 rem 值它允许你以相对方式指定字体大小，而不受到父元素大小的影响，从而消除了复合问题。
font-weight 属性 - 设置字体的粗细程度
描述: 此属性指定了字体的粗细程度，一些字体只提供 normal 和 bold 两种值。
语法参数:
代码语言：javascript复制/* Keyword values */
/*
normal: 正常粗细 与 400 等值。
bold : 加粗 与 700 等值。
*/
font-weight: normal; | bold;
/* Keyword values relative to the parent */
/*
lighter 比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。
bolder 比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
*/
font-weight: lighter; | bolder;
/* Numeric keyword values */
/* 一个介于 100 和 1000 (包含) 之间的 <number> 类型值, 更大的数值代表字体重量粗于更小的数值 (或一样粗)
当设置 400 时等同于 normal，而 700 等同于 bold。
*/
font-weight: 100 ~ 1000;
font-variant 属性 - 设置可变字体
描述: 此属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小，它是 font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian (en-US)等属性的简写, 你也可以使用简写 font 设定font-variant 在 CSS Level 2 (Revision 1) 中的值（即normal 或 small-caps）。
知识扩展: varaent：英 ['veərɪənt] ：adj. 不同的；多样的 n. 变体；转化
语法参数:
代码语言：javascript复制/* 语法： */
font-variant = normal | none |
[ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]
/* 参数 */
normal：规定一个常规（normal）字型；每个非简写的属性的初始值都是 normal ，非简写 `font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures 和 font-variant-east-asian` 属性。
none： 将 font-variant-ligatures 设定为 none ，将其他非简写属性的值设定为初始值normal。
small-caps: 浏览器会显示小型大写字面的字体。
font 属性 - 设置文本字体
描述: 此属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。
温馨提示: font 字体相关的属性简写必须包含 <font-size> 和 <font-family>，可以选择性包含以下值：<font-style> 和 <font-variant> 和 <font-weight> 和 <line-height>，但是font-style, font-variant 和 font-weight 必须在 font-size 之前，且 font-family 必须最后指定。
温馨提示: 此属性也有第六个值："line-height"，可设置行间距。（Text样式中）
语法参数:
代码语言：javascript复制# 语法示例:
font =
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
caption |
icon |
menu |
message-box |
small-caption |
status-bar
# 参数
caption: 用于标题控件（如按钮，下拉列表等）的系统字体。
icon: 用于标签图标的系统字体。
menu: 菜单中（如下拉菜单和菜单列表）使用的系统字体。
message-box: 用于对话框的系统字体。
small-caption: 用于小标题控件的系统字体。
status-bar: 用于窗口状态栏的系统字体。
简单示例
- 示例1.演示如何使用简写属性将字体属性设置在一个声明之内
<p style="font: italic small-caps bold medium/1em times,monospace">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p style="font: italic bold xx-large/20px courier,serif;">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<q style="font: oblique lighter medium 'New York',serif;">这是是个段引用q标签</q>
- 示例2.演示如何设置使用 "caption" 值及其他值的的段落字体
<p>This is a normal paragraph</p>
<p style="font: caption">This is a paragraph with a "caption" font</p>
<p style="font: message-box">This is a paragraph with a "caption" font</p>
<p style="font: small-caption">This is a paragraph with a "caption" font</p>
<p style="font: status-bar">This is a paragraph with a "caption" font</p>
执行结果:
文本字体综合示例
代码语言：javascript复制<style type="text/css">
/* 示例1 */
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier, sans-serif;
line-height: 80%;
line-break: strict;
}
/* 示例2 */
.serif { font-family: Times, "Times New Roman", Georgia, serif;}
.sansserif { font-family: Verdana, Arial, Helvetica, sans-serif;}
.monospace { font-family: "Lucida Console", Courier, monospace;}
.cursive {font-family: cursive;}
.fantasy {font-family: fantasy;}
.emoji { font-family: emoji;}
.math { font-family: math;}
.fangsong { font-family: fangsong;}
/* 示例3 */
p.normal {font-variant: normal;}
p.small { font-variant: small-caps;}
/* 示例4 */
p.percent { font: 80% sans-serif;}
/* Set the font weight to bold,
the font-style to italic,
the font size to large,
and the font family to serif. */
p.large { font: bold italic large serif;}
/* Use the same font as the status bar of the window */
p.bar { font: status-bar;}
</style>
<div class="content">
<h6>示例1.line-* / font-* 使段落的首字母浮动于左侧，并向这个字母添加样式。</h6>
<p><span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"</p>
<div class="serif">This is an example of a serif font.</div>
<div class="sansserif">This is an example of a sans-serif font.</div>
<div class="monospace">This is an example of a monospace font.</div>
<div class="cursive">This is an example of a cursive font.</div>
<div class="fantasy">This is an example of a fantasy font.</div>
<div class="math">This is an example of a math font.</div>
<div class="emoji">This is an example of an emoji font.</div>
<div class="fangsong">作者: WeiyiGeek,公众号【全栈工程师修炼指南】</div>
</div>
<div style="font-size: 100%">
<h6>示例2.使用em 值创建动态或计算字体大小，使用 rem 值为了避免复合问题。 </h6>
<p> <span style="font-size: 1.6em;">1.Outer </span>inner<span style="font-size: 1.8em;"> outer</span> </p>
<p> <span style="font-size: 1.6rem;">2.Outer </span>inner<span style="font-size: 1.8rem;"> outer</span> </p>
</div>
<div>
<h6>示例3.font-variant 可变字体</h6>
<p class="normal">WeiyiGeeker</p>
<p class="small">WeiyiGeeker</p>
</div>
<div>
<h6>示例4.font 文本设置</h6>
<p class="percent">https://weiyigeek.top</p>
<p class="large">https://www.weiyigeek.top<</p>
<p class="bar">https://blog.weiyigeek.top<</p>
</div>
执行结果：
letter-spacing 属性 - 设置文本字符的间距表现
描述：此属性用于设置文本字符的间距表现，在渲染文本时添加到字符之间的自然间距中，letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。
语法参数:
代码语言：javascript复制/* normal: 此间距是按照当前字体的正常间距确定的, 和 0 不同的是，normal 会让用户代理调整文字之间空间来对齐文字。 */
letter-spacing: normal;
/* <<length>: 指定文字间的间距以替代默认间距。可以是负值 */
letter-spacing: 0.3em;
letter-spacing: 3px;
温馨提示: 如果给一个很大的正或负的 letter-spacing 值会将应用这个样式的单词变为不可读的，需要根据实际情况进行调整。
word-spacing 属性 - 设置文本单词的间距表现
描述: 此属性 设置标签、单词之间的空格长度。
语法参数:
代码语言：javascript复制word-spacing: normal; /* 正常的单词间距，由当前字体和/或浏览器定义。 */
word-spacing: 3px; /* <length> 通过指定具体的额外间距来增加字体的单词间距。*/
word-spacing: 50%; /* <percentage> 通过指定受影响字符的宽度的百分比的方式来增加的间距。*/
word-break 属性 - 设置单词内断行表现
描述：此属性处理理单词间带有标点符号的中文、日文或韩文（CJK）文本的断行表现。
语法参数:
代码语言：javascript复制/* 语法: */
word-break = normal | keep-all | break-all | break-word
/* 参数: */
normal: 使用默认的断行规则。
break-all: 对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all: CJK 文本不断行。Non-CJK 文本表现同 normal。
break-word 已弃用: 他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。
white-space 属性 - 处理空白字符
描述: 此属性用于设置如何处理元素内的空白字符即对源文档中的空格、换行和 tab 字符的处理，确定空白字符是否合并以及如何合并、还有是否换行以及如何换行，若是要使单词可以在其内部被截断，请使用 overflow-wrap、word-break 或 hyphens 代替。
语法参数:
代码语言：javascript复制white-space =
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
下面的表格总结了各种 white-space 关键字值的行为：
换行符 | 空格和制表符 | 文本换行 | 行末空格 | 行末的其他空白分隔符 | |
|---|---|---|---|---|---|
normal | 合并 | 合并 | 换行 | 移除 | 挂起 |
nowrap | 合并 | 合并 | 不换行 | 移除 | 挂起 |
pre | 保留 | 保留 | 不换行 | 保留 | 不换行 |
pre-wrap | 保留 | 保留 | 换行 | 挂起 | 挂起 |
pre-line | 保留 | 合并 | 换行 | 移除 | 挂起 |
break-spaces | 保留 | 保留 | 换行 | 换行 | 换行 |
温馨提示：空格和其他空白分隔符之间存在区别，如果空白字符被挂起，那么它可能会影响框的固有尺寸的测量结果。
- 空格：空格（U 0020）、制表符（U 0009）和分段符（例如换行）
- 其他空白分隔符: Unicode 中定义的所有其他空格分隔符（已定义为空格的分隔符除外）。
综合示例演示:
代码语言：javascript复制<style>
h6 { color:red; }
/* 示例1. */
.normal { letter-spacing: normal;}
.em-wide { letter-spacing: 0.4em;}
.em-wider { letter-spacing: 1em;}
.em-tight { letter-spacing: -0.1em;}
.px-wide { letter-spacing: 6px;}
/* 示例2. */
p.wnormal { word-spacing: normal; }
p.length { word-spacing: 5px; }
/* 示例3. */
.narrow {
padding: 10px;
border: 1px solid;
width: 500px;
margin: 0 auto;
font-size: 20px;
line-height: 1.5;
letter-spacing: 1px;
}
.normal { word-break: normal;}
.breakAll { word-break: break-all;}
</style>
<div>
<h6>示例1.letter-spacing 字符间距设置</h6>
<p class="lnormal">letter spacing，weiyigeek.top</p>
<p class="em-wide">letter spacing，weiyigeek.top</p>
<p class="em-wider">letter spacing，weiyigeek.top</p>
<p class="em-tight">letter spacing，weiyigeek.top</p>
<p class="px-wide">letter spacing，weiyigeek.top</p>
</div>
<div>
<h6>示例2.word-spacing 单词间距设置</h6>
<p class="wnormal">welcome to visit my blog.weiyigeek.top</p>
<p class="length">welcome to visit my blog.weiyigeek.top</p>
</div>
<div>
<h6>示例3.word-break单词内断行表现设置</h6>
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
这是一个漫长而光荣的海洋生物多样性研究
</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
这是一个漫长而光荣的海洋生物多样性研究
</p>
</div>
<div>
<h6>示例4.white-space 对源文档中的空格、换行和 tab 字符的处理。</h6>
<p style="white-space: normal;">This paragraph has many
spaces in it. -> normal: 时会合并空白符以及忽略换行符。</p>
<hr/>
<p style="white-space: nowrap;">This paragraph has many
spaces in it.This paragraph has many
spaces in it. -> nowrap: 此时会忽略换行符不自动换行。</p>
<hr/>
<p style="white-space: pre;">This paragraph has many
spaces in it.This paragraph has many
spaces in it. -> pre: 此时保留空格，保留换行符，但是不自动换行.</p>
<hr/>
<p style="white-space: pre-wrap;">This paragraph has many
spaces in it.This paragraph has many
spaces in it. -> pre-wrap: 此时保留空格，保留换行符，</p>
<hr/>
<p style="white-space: pre-line;">This paragraph has many
spaces in it.This paragraph has many
spaces in it. -> pre-line: 此时合并空白符, 保留换行符，</p>
</div>
执行效果:
本文至此完毕，更多技术文章，尽情等待下篇好文！
原文地址: https://blog.weiyigeek.top/2023/10-12-780.html
