第09篇：文本样式与控制

第09篇文本样式与控制文字不仅是信息的载体更是视觉设计的重要元素。除了字体和排版CSS 还提供了丰富的文本控制属性——对齐方式、间距调整、装饰效果、换行策略、阴影特效等。掌握这些属性你能让文字呈现出专业级的视觉效果。学习目标掌握text-align、text-indent等对齐和缩进属性理解text-decoration的现代子属性用法学会用letter-spacing、word-spacing微调文字间距掌握white-space、word-break、overflow-wrap控制换行学会text-overflow和-webkit-line-clamp实现文字截断掌握text-shadow创造层次感的文字效果了解vertical-align的正确用法不仅限于表格理解writing-mode实现竖排文字核心知识点一、文本对齐text-align— 水平对齐/* 基础对齐方式 */.text-left{text-align:left;}/* 左对齐默认 */.text-center{text-align:center;}/* 居中对齐 */.text-right{text-align:right;}/* 右对齐 */.text-justify{text-align:justify;}/* 两端对齐 */text-align: justify的真相/* 两端对齐会拉伸文字间距使每行宽度相同 */.article{text-align:justify;/* 中文排版建议配合 word-break 使用 */word-break:normal;overflow-wrap:break-word;}/* 但最后一行默认是左对齐的 */text-align-last— 最后一行对齐/* 控制最后一行或被强制换行的行的对齐方式 */.justify-all{text-align:justify;text-align-last:justify;/* 最后一行也两端对齐 */}/* 常用值 */.text-align-last-left{text-align-last:left;}.text-align-last-center{text-align-last:center;}.text-align-last-right{text-align-last:right;}text-indent— 首行缩进/* 传统中文排版段落首行缩进两字符 */.article p{text-indent:2em;/* 缩进 2 个字符宽度 */}/* 悬挂缩进第一行不缩进其余行缩进 */.hanging-indent{padding-left:2em;text-indent:-2em;}二、文本装饰text-decoration— 现代子属性CSS3 将text-decoration拆分为多个子属性实现更精细的控制/* 传统写法仍可用 */.underline{text-decoration:underline;}/* 现代写法推荐 */.modern-link{text-decoration-line:underline;/* 线的类型 */text-decoration-style:wavy;/* 线的样式 */text-decoration-color:#4a90d9;/* 线的颜色 */text-decoration-thickness:2px;/* 线的粗细 */text-underline-offset:4px;/* 线与文字的距离 */}text-decoration-line取值值效果none无装饰underline下划线overline上划线line-through删除线underline line-through组合使用text-decoration-style取值值效果solid实线默认double双线dotted点状线dashed虚线wavy波浪线/* 实战优雅的链接下划线 */.article a{text-decoration:none;color:#4a90d9;}.article a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}/* 删除线标记已完成任务 */.task-done{text-decoration:line-through;text-decoration-color:#999;color:#999;}text-transform— 文字大小写转换/* 常用于英文排版 */.uppercase{text-transform:uppercase;}/* 全大写 */.lowercase{text-transform:lowercase;}/* 全小写 */.capitalize{text-transform:capitalize;}/* 首字母大写 *//* 实战按钮标签统一大写 */.btn-label{text-transform:uppercase;letter-spacing:0.05em;font-size:0.875rem;}三、文字间距微调letter-spacing— 字符间距/* 正值增大间距负值减小间距 */.loose{letter-spacing:0.1em;}/* 宽松 */.normal{letter-spacing:normal;}/* 默认 */.tight{letter-spacing:-0.02em;}/* 紧凑 *//* 实战标题适当加宽字间距更有设计感 */h1, h2{letter-spacing:-0.02em;/* 大标题略紧凑 */}.small-caps{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;/* 小字大写需要加宽 */}word-spacing— 单词间距/* 主要影响英文等以空格分词的语言 */.wide-words{word-spacing:0.25em;}/* 中文不受 word-spacing 影响中文没有单词概念 */四、换行与空白控制white-space— 空白处理这是控制文本换行和空白折叠的核心属性值空白折叠换行符自动换行normal是当作空格是nowrap是当作空格否pre否保留否pre-wrap否保留是pre-line是保留是break-spaces否保留是在行尾空白处换行/* 单行文本不换行 */.single-line{white-space:nowrap;}/* 保留用户输入的换行和空格如评论内容 */.user-content{white-space:pre-wrap;}/* 显示代码块 */.code-block{white-space:pre;overflow-x:auto;}word-break— 单词断行/* 默认值 */.word-break-normal{word-break:normal;/* 英文按单词换行 *//* 中文按字符换行 */}/* 允许在任意字符间断行常用于URL或长英文 */.word-break-all{word-break:break-all;/* 英文会被强行拆开 */}/* 保持单词完整但CJK字符可以换行 */.word-break-keep{word-break:keep-all;/* 中文不会被拆开每行一个完整词 */}适用场景对比场景推荐设置普通中文文章word-break: normal; overflow-wrap: break-word;英文技术文档有长单词overflow-wrap: break-word;表格中的长 URLword-break: break-all;中文标题不换行word-break: keep-all;overflow-wrap/word-wrap— 溢出换行/* 两个属性效果相同overflow-wrap 是标准名称 */.wrap-long-words{overflow-wrap:break-word;/* 只在必要时断开长单词 *//* 或 */word-wrap:break-word;}/* 另一个值anywhere在任意点换行包括min-content尺寸计算 */.wrap-anywhere{overflow-wrap:anywhere;}五、文字截断与溢出text-overflow— 溢出标记/* 单行截断经典三件套 */.ellipsis{white-space:nowrap;/* 不换行 */overflow:hidden;/* 溢出隐藏 */text-overflow:ellipsis;/* 显示省略号 */}/* 截断但显示自定义标记 */.custom-clip{white-space:nowrap;overflow:hidden;text-overflow: ;/* 自定义标记有限支持 */}-webkit-line-clamp— 多行截断/* 多行截断需要配合 display: -webkit-box */.line-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;/* 显示 3 行 */overflow:hidden;}/* 现代标准写法逐渐支持中 */.line-clamp-modern{display:block;line-clamp:3;/* 标准属性 */overflow:hidden;}六、文字阴影与特效text-shadow— 文字阴影/* 语法text-shadow: x偏移 y偏移 模糊半径 颜色; *//* 基础阴影 */.text-shadow{text-shadow:2px 2px 4pxrgba(0,0,0,0.3);}/* 无偏移的 glow 效果 */.text-glow{text-shadow:0 0 10px #4a90d9;}/* 多层阴影创造立体感 */.text-3d{text-shadow:1px 1px 0 #ccc,2px 2px 0 #999,3px 3px 0 #666;}/* 文字描边效果 */.text-stroke{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;}七、vertical-align— 垂直对齐vertical-align最容易被误解的属性——它只对行内元素和表格单元格有效。用于行内元素/* 控制行内元素在其所在行中的垂直位置 */.icon-text{vertical-align:middle;/* 图标与文字中线对齐 */}/* 常用值 */.baseline{vertical-align:baseline;}/* 基线对齐默认 */.top{vertical-align:top;}/* 行顶对齐 */.middle{vertical-align:middle;}/* 中线对齐 */.bottom{vertical-align:bottom;}/* 行底对齐 */.text-top{vertical-align:text-top;}/* 文字顶部对齐 */.text-bottom{vertical-align:text-bottom;}/* 文字底部对齐 *//* 数值 */.super{vertical-align:super;}/* 上标 */.sub{vertical-align:sub;}/* 下标 */.offset{vertical-align:4px;}/* 相对基线偏移 4px */.offset-neg{vertical-align:-2px;}/* 向下偏移 */p这是一段文字imgsrcicon.pngclassicon-textalt带图标的文字/p.icon-text{vertical-align:middle;/* 让图标的中线与文字的中线对齐 */}用于表格单元格/* 表格单元格中内容的垂直对齐 */.cell-top{vertical-align:top;}.cell-middle{vertical-align:middle;}.cell-bottom{vertical-align:bottom;}常见误区纠正/* ❌ 这样写没效果vertical-align 对块级元素无效 */.container{vertical-align:middle;/* 无效 */}/* ✅ 块级元素的垂直居中要用其他方式 */.container{display:flex;align-items:center;/* Flexbox 垂直居中 */}八、writing-mode— 文字书写方向/* 实现竖排文字从右到左 */.vertical-rl{writing-mode:vertical-rl;/* 垂直方向从右向左 */}/* 竖排文字从左到右 */.vertical-lr{writing-mode:vertical-lr;/* 垂直方向从左向右 */}/* 横排默认 */.horizontal-tb{writing-mode:horizontal-tb;/* 水平方向从上到下 */}/* 实战古诗词竖排展示 */.poetry{writing-mode:vertical-rl;height:300px;font-family:Noto Serif SC,serif;line-height:2.5;letter-spacing:0.3em;}九、列表样式控制list-style系列属性/* 简写 */ul{list-style:square inside;/* 类型 位置 */}/* 分别设置 */ul.custom-list{list-style-type:none;/* 去掉默认标记 */list-style-position:outside;/* 标记在内容外默认 */}/* 用伪元素自定义列表标记更灵活 */.custom-list li{list-style:none;position:relative;padding-left:20px;}.custom-list li::before{content:•;color:#4a90d9;position:absolute;left:0;}list-style-type常用值值效果disc实心圆ul 默认circle空心圆square实心方块decimal数字ol 默认decimal-leading-zero01, 02, 03…lower-romani, ii, iii…upper-romanI, II, III…lower-alphaa, b, c…none无标记十、文字方向与国际化direction和unicode-bidi/* 从右到左的文本阿拉伯语、希伯来语 */.rtl{direction:rtl;unicode-bidi:embed;}/* 更推荐在 HTML 中设置 dir 属性 *//* p dirrtlArabic text/p */动手练习练习 1新闻卡片文字截断实现一个新闻卡片要求标题单行显示超出用省略号摘要显示 3 行超出用省略号时间信息右对齐练习 2优雅的链接样式实现一组文章链接默认状态无下划线鼠标悬停时出现下划线下划线与文字有一定间距已访问链接颜色变淡使用text-decoration的现代子属性练习 3代码块显示优化实现一个代码展示区域保留代码中的空格和换行长代码行不自动换行允许横向滚动行号用伪元素实现可选常见误区 ⚠️误区真相“text-align: center可以居中块级元素”text-align只对行内内容和文本有效。块级元素居中要用margin: 0 auto;或 Flexbox“vertical-align: middle可以垂直居中 div”vertical-align对块级元素无效只对行内元素和 table-cell 有效“white-space: pre和pre-wrap一样”pre不会自动换行内容会溢出pre-wrap会自动换行“word-break: break-all适合所有场景”break-all会随意拆断英文单词影响可读性。普通内容推荐overflow-wrap: break-word“text-overflow可以单独使用”必须配合white-space: nowrap和overflow: hidden才能生效“-webkit-line-clamp是标准属性”这是 WebKit 前缀属性虽然广泛支持但非标准。CSS 标准line-clamp正在推进“letter-spacing对中文没效果”letter-spacing对中文同样有效可以调整中文字符间距“writing-mode只是旋转文字”它改变的是整个排版方向包括行内元素的排列顺序和 margin/padding 的方向速查卡片 文本对齐属性作用text-align水平对齐left/center/right/justifytext-align-last最后一行对齐方式text-indent首行缩进vertical-align行内/表格单元格垂直对齐空白与换行属性作用white-space空白处理与换行策略word-break单词断行规则overflow-wrap溢出时换行text-overflow溢出标记ellipsis装饰效果属性作用text-decoration-line装饰线类型text-decoration-style装饰线样式solid/dotted/wavytext-decoration-color装饰线颜色text-underline-offset下划线偏移text-shadow文字阴影文字截断三件套/* 单行截断 */.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/* 多行截断 */.line-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}扩展阅读MDN: text-alignMDN: text-decorationMDN: white-spaceMDN: overflow-wrapMDN: writing-modeCSS-Tricks: text-overflow英文配套代码CODE/09/text-control-demo.html — 文本样式控制综合演示CODE/09/text-truncate.html — 文字截断与溢出处理示例下一步进入 第10篇颜色系统与透明度学习 CSS 的颜色表示与搭配技巧。