核心 text- 属性:*
-
text-align
-
作用: 指定块级元素或表格单元格内部的**行内内容（如文本）**的水平对齐方式。
-
值:
- left: 内容左对齐。
- right: 内容右对齐。
- center: 内容居中对齐。
- justify: 内容两端对齐（通过调整单词间距或字符间距）。最后一行通常是左对齐。
- start: 根据书写方向 (direction) 对齐到起始边缘（left for LTR, right for RTL）。
- end: 根据书写方向对齐到结束边缘（right for LTR, left for RTL）。
- match-parent: 类似 inherit，但 start/end 值会根据父元素的 direction 计算。
-
示例: text-align: center;
-
-
text-align-last
- 作用: 指定块或行在强制换行后的最后一行（对于 text-align: justify 则为最后一行之前）的水平对齐方式。
- 值: auto (默认，遵循 text-align), start, end, left, right, center, justify。
- 示例: text-align: justify; text-align-last: center; (两端对齐，但最后一行居中)
-
text-decoration (简写属性)
-
作用: 设置文本的装饰线（如下划线、删除线等）。
-
值: 这是 text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness 的简写。
- 可以组合使用，如 text-decoration: underline wavy red 2px;
- 常用单个值: none (无装饰), underline (下划线), overline (上划线), line-through (删除线)。
-
示例: text-decoration: underline;
-
-
text-decoration-line
- 作用: 指定要使用的装饰线的类型。
- 值: none, underline, overline, line-through, blink (已废弃，不建议使用)。可以组合，如 underline line-through。
- 示例: text-decoration-line: underline;
-
text-decoration-color
- 作用: 设置装饰线的颜色。
- 值: (如 red, #ff0000, rgb(255,0,0))。
- 示例: text-decoration-color: blue;
-
text-decoration-style
- 作用: 设置装饰线的样式。
- 值: solid (默认), double, dotted, dashed, wavy。
- 示例: text-decoration-style: wavy;
-
text-decoration-thickness
- 作用: 设置装饰线的粗细。
- 值: auto (浏览器默认), from-font (使用字体建议的粗细，如果可用), (如 2px), (相对于 1em)。
- 示例: text-decoration-thickness: 3px;
-
text-underline-position
- 作用: 设置下划线相对于文本基线的位置。
- 值: auto (默认), under (标准下划线位置), left (垂直文字左侧), right (垂直文字右侧), under left (组合)。
- 示例: text-underline-position: under; (确保下划线不穿过字母下伸部分)
-
text-underline-offset
- 作用: 设置下划线与其原始位置的垂直距离。
- 值: auto (默认), (如 3px), (相对于 1em)。
- 示例: text-underline-offset: 0.1em; (将下划线向下移动一点)
-
text-transform
-
作用: 控制文本的大小写转换。
-
值:
- none: 无转换。
- capitalize: 每个单词的首字母大写。
- uppercase: 所有字母转为大写。
- lowercase: 所有字母转为小写。
- full-width: 将字符（主要是拉丁字母和数字）转换为等宽的全角形式（常用于东亚排版对齐）。
- full-size-kana: 将小写假名转换为普通大小的假名（主要用于日语）。
-
示例: text-transform: uppercase;
-
-
text-indent
-
作用: 指定块容器中第一行文本的缩进量。
-
值: (如 30px, 2em), (相对于包含块的宽度)。可以是负值（悬挂缩进）。
- each-line: （实验性）每一行都缩进。
- hanging: （实验性）除第一行外都缩进（需要配合使用）。
-
示例: text-indent: 2em;
-
-
text-overflow
-
作用: 控制当行内内容溢出其块容器时如何向用户显示。通常需要配合 overflow: hidden; 和 white-space: nowrap; 使用。
-
值:
- clip: (默认) 在容器边缘直接裁剪，不显示省略号。
- ellipsis: 在裁剪处显示省略号 (...)。
- : （实验性）在裁剪处显示指定的字符串。
- fade: （非标准）使用渐变效果隐藏溢出部分。
-
示例: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-
-
text-shadow
-
作用: 给文本添加一个或多个阴影效果。
-
值: none 或一个逗号分隔的阴影列表。每个阴影的格式为： ? ?
- : 水平偏移量 (必需)。
- : 垂直偏移量 (必需)。
- : 模糊半径 (可选，默认为0)。
- : 阴影颜色 (可选，默认为 currentColor)。
-
示例: text-shadow: 2px 2px 5px rgba(0,0,0,0.5), -1px -1px 0 blue; (一个半透明黑阴影和一个蓝色描边效果)
-
-
text-justify
- 作用: 当 text-align 设置为 justify 时，指定使用的两端对齐算法。浏览器支持和效果差异较大，不常用。
- 值: auto (默认), none, inter-word (调整单词间距), inter-character (调整字符间距)。
- 示例: text-align: justify; text-justify: inter-word;
-
text-orientation
-
作用: 定义垂直书写模式 (writing-mode) 下文本字符的方向。
-
值:
- mixed: (默认) 水平书写的文字保持水平，垂直书写的文字保持垂直。
- upright: 所有字符（包括水平书写的）都保持直立。
- sideways: 所有字符都顺时针旋转 90 度。
-
示例: writing-mode: vertical-rl; text-orientation: upright;
-
-
text-combine-upright (以前叫 text-combine-horizontal)
-
作用: 在垂直书写模式下，将多个字符（通常是数字或短拉丁文）组合在一个字符空间内水平显示。
-
值:
- none: (默认) 不组合。
- all: 尝试将所有内容组合在一个字符空间内。
- digits ?: 尝试组合指定数量（默认为2到4个）的连续 ASCII 数字。
-
示例: writing-mode: vertical-rl; text-combine-upright: digits 2; (尝试组合2位数字)
-
-
text-emphasis (简写属性)
- 作用: 向文本添加强调标记（通常用于东亚语言）。
- 值: 这是 text-emphasis-style 和 text-emphasis-color 的简写。如 text-emphasis: circle red;
- 示例: text-emphasis: filled dot;
-
text-emphasis-style
- 作用: 定义强调标记的形状。
- 值: none, filled (实心), open (空心), dot (点), circle (圆圈), double-circle, triangle, sesame (芝麻点), (使用指定字符)。可以组合 filled/open 与形状，如 open dot。
- 示例: text-emphasis-style: filled sesame;
-
text-emphasis-color
- 作用: 定义强调标记的颜色。
- 值: 。默认为 currentColor。
- 示例: text-emphasis-color: blue;
-
text-emphasis-position
- 作用: 定义强调标记相对于文本的位置。
- 值: over right (水平文字上方，垂直文字右侧 - 默认), over left, under right, under left。
- 示例: text-emphasis-position: under right;
-
text-rendering
-
作用: 向浏览器提供关于如何优化文本渲染的提示。浏览器不一定会严格遵守。
-
值:
- auto: (默认) 浏览器自行权衡速度、易读性和几何精度。
- optimizeSpeed: 优先考虑渲染速度，可能牺牲易读性和精度。
- optimizeLegibility: 优先考虑易读性（如启用连字和字距调整），可能牺牲速度和精度。
- geometricPrecision: 优先考虑几何精度，可能牺牲速度和易读性。对某些 SVG 字体可能有用。
-
示例: text-rendering: optimizeLegibility;
-
其他直接影响文本表现的关键属性:
-
color: 设置文本的前景色。
- 值: 。
- 示例: color: #333;
-
letter-spacing: 调整字符之间的额外空间。
- 值: normal (默认), (如 1px, -0.05em)。
- 示例: letter-spacing: 0.5px;
-
word-spacing: 调整单词之间的额外空间。
- 值: normal (默认), (如 5px, 0.2em), 。
- 示例: word-spacing: 0.25em;
-
line-height: 设置行高，影响文本行之间的垂直距离。
- 值: normal (默认), (无单位，推荐), , 。
- 示例: line-height: 1.6;
-
white-space: 控制元素内部的空白符（空格、换行符）如何处理以及是否换行。
- 值: normal, nowrap, pre, pre-wrap, pre-line, break-spaces。
- 示例: white-space: nowrap; (防止文本换行)
-
direction: 设置文本方向 (从左到右 LTR 或从右到左 RTL)。
- 值: ltr, rtl。
- 示例: direction: rtl;
-
unicode-bidi: 与 direction 配合使用，处理双向文本的嵌入和覆盖级别。值较复杂 (normal, embed, isolate, bidi-override 等)，通常在需要精确控制混合方向文本时使用。
-
writing-mode: 定义文本的书写方向（水平或垂直）。
- 值: horizontal-tb (默认), vertical-rl, vertical-lr, sideways-rl, sideways-lr。
- 示例: writing-mode: vertical-rl;
-
vertical-align: 定义行内级元素 (包括文本中的字符) 在其行框内的垂直对齐方式。
- 值: baseline (默认), sub, super, top, text-top, middle, bottom, text-bottom, , 。
- 示例: vertical-align: middle; (常用于图片与文字对齐)
-
word-break: 指定非 CJK (中日韩) 文本的单词内部如何断行。
- 值: normal, break-all (可在任意字符间断行), keep-all (CJK 不断行，非 CJK 行为类似 normal)。
- 示例: word-break: break-all;
-
overflow-wrap (曾用名 word-wrap) : 指定浏览器是否可以在一个原本不会断开的长单词或字符串（如 URL）内部进行换行，以防止内容溢出。
- 值: normal (默认), break-word (允许在单词内部断行), anywhere (实验性，更强的断行机会)。
- 示例: overflow-wrap: break-word;
-
hyphens: 控制当文本换行时是否以及如何使用连字号 (-) 连接单词。需要浏览器和语言支持。
- 值: none, manual (只在 处断), auto (浏览器自动加连字号)。
- 示例: hyphens: auto;
-
tab-size: 定义制表符 (\t) 的宽度。
- 值: (空格数), 。
- 示例: tab-size: 4;
案例 1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text 属性示例</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<h1>CSS Text 属性演示</h1>
<div class="container">
<h2>文本对齐 (text-align)</h2>
<p class="align-left">这段文本是左对齐的 (默认)。Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="align-center">这段文本是居中对齐的。Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="align-right">这段文本是右对齐的。Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="align-justify">这段文本是两端对齐的 (justify)。需要足够长的文本才能看出效果。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, blanditiis culpa cumque delectus distinctio doloremque.</p>
<p class="align-justify align-last-center">这段文本两端对齐，但最后一行居中 (text-align-last: center)。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, voluptatum?</p>
</div>
<div class="container">
<h2>文本装饰 (text-decoration & text-shadow)</h2>
<p class="deco-underline">这是<u>带下划线</u>的文本 (underline)。</p>
<p class="deco-linethrough">这是<del>带删除线</del>的文本 (line-through)。</p>
<p class="deco-overline">这是<span>带上划线</span>的文本 (overline)。</p>
<p class="deco-wavy-red">这是<span class="custom-deco">自定义波浪红色下划线</span>文本。</p>
<p class="shadow-simple">带简单阴影的文本。</p>
<p class="shadow-multi">带多种阴影效果的文本 (描边)。</p>
</div>
<div class="container">
<h2>文本转换 (text-transform)</h2>
<p class="transform-upper">this text will be uppercase.</p>
<p class="transform-lower">This Text Will Be LOWERCASE.</p>
<p class="transform-capitalize">capitalize the first letter of each word.</p>
</div>
<div class="container">
<h2>文本间距与缩进 (Spacing & Indentation)</h2>
<p class="indent-example">首行缩进 2em。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque aut autem commodi consequatur corporis cumque cupiditate delectus dicta distinctio doloremque.</p>
<p class="letter-space">字 符 间 距 增 加。</p>
<p class="word-space">单词 之间 的 间距 增加 了。</p>
</div>
<div class="container">
<h2>文本溢出 (text-overflow)</h2>
<p class="overflow-ellipsis">这是一个非常非常非常长的句子，它会超出容器的宽度，并在末尾显示省略号。</p>
</div>
<div class="container">
<h2>其他相关属性</h2>
<p class="custom-color">这段文本使用自定义颜色。</p>
<p class="increased-line-height">增加行高可以提高可读性。<br>这是第二行，<br>这是第三行。</p>
<p class="no-wrap-text">这段文字设置了 white-space: nowrap，所以不会自动换行，除非容器强制。</p>
<p class="break-long-word">这里有一个超长单词需要处理：Supercalifragilisticexpialidocious能否在中间断开？</p>
</div>
</body>
</html>
//1.css
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 20px;
color: #333; /* 默认文本颜色 */
}
h1, h2 {
color: steelblue;
border-bottom: 1px solid lightgray;
padding-bottom: 8px;
margin-bottom: 15px;
}
.container {
background-color: #f8f8f8;
border: 1px solid #eee;
padding: 15px;
margin-bottom: 30px;
border-radius: 4px;
}
p {
margin-bottom: 10px;
}
/* --- 文本对齐 --- */
.align-left {
text-align: left; /* 默认，可以不写 */
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-justify {
text-align: justify;
}
.align-last-center {
text-align-last: center;
}
/* --- 文本装饰 --- */
.deco-underline u { /* 或者直接给p加class，然后用 text-decoration */
text-decoration: underline;
text-decoration-color: green; /* 改变下划线颜色 */
text-decoration-thickness: 2px; /* 改变下划线粗细 */
}
.deco-linethrough del {
text-decoration: line-through;
text-decoration-style: dotted; /* 改变删除线样式 */
}
.deco-overline span {
text-decoration: overline;
}
.custom-deco {
text-decoration: underline wavy red 2px; /* 简写：类型 样式 颜色 粗细 */
text-underline-offset: 3px; /* 下划线偏移 */
}
.shadow-simple {
/* 水平偏移 垂直偏移 模糊半径 颜色 */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.shadow-multi {
color: white; /* 文字设为白色 */
/* 多个阴影用逗号隔开，可以模拟描边 */
text-shadow:
1px 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000; /* 黑色描边 */
}
/* --- 文本转换 --- */
.transform-upper {
text-transform: uppercase;
}
.transform-lower {
text-transform: lowercase;
}
.transform-capitalize {
text-transform: capitalize;
}
/* --- 文本间距与缩进 --- */
.indent-example {
text-indent: 2em; /* 首行缩进两个字符宽度 */
}
.letter-space {
letter-spacing: 3px; /* 增加字符间距 */
}
.word-space {
word-spacing: 8px; /* 增加单词间距 */
}
/* --- 文本溢出 --- */
.overflow-ellipsis {
width: 300px; /* 必须：给容器一个固定宽度 */
white-space: nowrap; /* 必须：强制文本不换行 */
overflow: hidden; /* 必须：隐藏溢出部分 */
text-overflow: ellipsis; /* 关键：显示省略号 */
border: 1px solid red; /* 方便观察容器边界 */
}
/* --- 其他相关属性 --- */
.custom-color {
color: darkmagenta; /* 设置文本颜色 */
}
.increased-line-height {
line-height: 2.5; /* 增加行高 */
background-color: #e0f2f7; /* 加背景方便观察 */
}
.no-wrap-text {
white-space: nowrap; /* 文本不换行 */
width: 200px;
border: 1px solid orange;
overflow: auto; /* 加滚动条看效果 */
}
.break-long-word {
width: 200px; /* 限制宽度 */
border: 1px solid green;
overflow-wrap: break-word; /* 允许在长单词内部换行 */
/* 或者 word-break: break-all; (更强的断词，可能不考虑单词本身) */
}
案例 2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Text 文本样式案例</title>
<style>
body {
font-family: "Arial", sans-serif;
padding: 20px;
background: #f9f9f9;
}
.text-align {
text-align: center; /* center / left / right / justify */
background: #e0f7fa;
padding: 10px;
margin-bottom: 20px;
}
.text-decoration {
text-decoration: underline; /* none / underline / line-through / overline */
color: #00796b;
margin-bottom: 20px;
}
.text-transform {
text-transform: uppercase; /* lowercase / capitalize */
color: #d84315;
margin-bottom: 20px;
}
.text-overflow {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.word-wrap {
width: 200px;
word-wrap: break-word; /* 允许长词换行 */
background: #fff3e0;
padding: 10px;
margin-bottom: 20px;
}
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2; /* 最多显示两行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
background: #fce4ec;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-align">这段文字是居中的。</div>
<div class="text-decoration">这是带有下划线的文字。</div>
<div class="text-transform">text transform 示例</div>
<div class="text-overflow">这是一段超出范围的文字，只显示一部分并显示省略号。</div>
<div class="word-wrap">这是一段非常长的单词：Supercalifragilisticexpialidocious，会自动换行。</div>
<div class="line-clamp">
这是一个多行文本限制的例子。这个段落最多显示两行，多余的部分会显示省略号。
即使你输入再多，也不会全部显示。
</div>
</body>
</html>
