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 &emsp;<span class="none">转换后：text-transform</span></p><p>原文： text-transform &emsp;<span class="uppercase">转换后：text-transform</span></p><p>原文： TEXT-TRANSFROM &emsp;<span class="lowercase">转换后：text-transform</span></p><p>原文： text-transform &emsp;<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文本格式化

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/436194.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PCL 索引空间采样

PCL 索引空间采样

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 索引空间采样 2.1.2 可视化原始点云和下采样后的点云 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xf…
阅读更多...
XSS | XSS 常用语句以及绕过思路

XSS | XSS 常用语句以及绕过思路

关注这个漏洞的其他相关笔记&#xff1a;XSS 漏洞 - 学习手册-CSDN博客 0x01&#xff1a;干货 - XSS 测试常用标签语句 0x0101&#xff1a;<a> 标签 <!-- 点击链接触发 - JavaScript 伪协议 --><a hrefjavascript:console.log(1)>XSS1</a> <!-- 字…
阅读更多...
Java | Leetcode Java题解之第448题找到所有数组中消失的数字

Java | Leetcode Java题解之第448题找到所有数组中消失的数字

题目&#xff1a; 题解&#xff1a; class Solution {public List<Integer> findDisappearedNumbers(int[] nums) {int n nums.length;for (int num : nums) {int x (num - 1) % n;nums[x] n;}List<Integer> ret new ArrayList<Integer>();for (int i …
阅读更多...
易天智能eHR CreateUser 任意用户添加漏洞

易天智能eHR CreateUser 任意用户添加漏洞

漏洞描述 易天智能eHR管理平台 /BaseManage/UserAPI/CreateUser 接口存在任意用户添加漏洞&#xff0c;未经身份验证的远程攻击者可以利用此漏洞添加任意管理员用户&#xff0c;导致攻击者可直接管理后台&#xff0c;造成信息泄露&#xff0c;使系统处于极不安全的状态。 漏洞…
阅读更多...
zi2zi-chain: 中国书法字体图片生成和字体制作的一站式开发

zi2zi-chain: 中国书法字体图片生成和字体制作的一站式开发

在zi2zi-pytorch的基础上&#xff0c;做了进一步的修复和完善。本项目github对应网址为https://github.com/not-bald-owl/zi2zi-chain/tree/master。 修复部分为&#xff1a;针对预处理部分的函数弃用、生僻字无法生成、训练和推理部分单卡支持改为多卡并行、以及扩展从本地的…
阅读更多...
初识Linux · 进程等待

初识Linux · 进程等待

目录 前言&#xff1a; 进程等待是什么 为什么需要进程等待 进程等待都在做什么 前言&#xff1a; 通过上文的学习&#xff0c;我们了解了进程终止&#xff0c;知道终止是在干什么&#xff0c;终止的三种情况&#xff0c;以及有了退出码&#xff0c;错误码的概念&#xff…
阅读更多...
基于Node.js+Express+MySQL+VUE实现的计算机毕业设计共享单车管理网站

基于Node.js+Express+MySQL+VUE实现的计算机毕业设计共享单车管理网站

单车信息选择骑行 骑行状态留言公告/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序 目录 功能图 界面展示 开发目标 开发背景意义 开发意义‌ 开发目的 项目概述‌ 技术选型与理由‌ 系统设计与功能实现‌ 项目可执行性分析 ‌系统架构需求‌ ‌性能需…
阅读更多...
leetcode力扣刷题系列——【座位预约管理系统】

leetcode力扣刷题系列——【座位预约管理系统】

题目 请你设计一个管理 n 个座位预约的系统&#xff0c;座位编号从 1 到 n 。 请你实现 SeatManager 类&#xff1a; SeatManager(int n) 初始化一个 SeatManager 对象&#xff0c;它管理从 1 到 n 编号的 n 个座位。所有座位初始都是可预约的。 int reserve() 返回可以预约座…
阅读更多...
解决 Android WebView 无法加载 H5 页面常见问题的实用指南

解决 Android WebView 无法加载 H5 页面常见问题的实用指南

目录 1. WebView 简介 2. 常见问题 3. 网络权限设置 4. 启用 JavaScript 5. DOM Storage 的重要性 6. 处理 HTTPS 问题 7. 设置 WebViewClient 8. 调试工具 9. 其他调试技巧 10. 结论 相关推荐 1. WebView 简介 Android WebView 是一种视图组件&#xff0c;使得 And…
阅读更多...
【STM32】 TCP/IP通信协议（1）--LwIP介绍

【STM32】 TCP/IP通信协议（1）--LwIP介绍

一、前言 TCP/IP是干啥的&#xff1f;它跟SPI、IIC、CAN有什么区别&#xff1f;它如何实现stm32的通讯&#xff1f;如何去配置&#xff1f;为了搞懂这些问题&#xff0c;查询资料可解决如下疑问&#xff1a; 1.为什么要用以太网通信? 以太网(Ethernet) 是指遵守 IEEE 802.3 …
阅读更多...
16.安卓逆向-frida基础-HOOK类方法2

16.安卓逆向-frida基础-HOOK类方法2

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;图灵Python学院 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要盲目相信。 工…
阅读更多...
在线毫米(mm)到像素(px)换算器

在线毫米(mm)到像素(px)换算器

具体请前往&#xff1a;在线mm转px工具--将实际长度毫米(Millimeters)单位换算为像素(Pixels)单位
阅读更多...
CAN总线的错误类型

CAN总线的错误类型

前言 CAN总线的错误类型主要包括&#xff1a;位错误、填充错误、格式错误、ACK错误和CRC错误。这里一定要做好CAN总线的错误类型、错误帧类型、节点状态之间的区别。 错误类型是帧传输出错的原因类型&#xff1b;错误帧类型&#xff08;主动错误帧、被动错误帧&#xff09;是帧…
阅读更多...
（c++)内存四区：1.代码区2.全局区（静态区）3.栈区4.堆区

（c++)内存四区：1.代码区2.全局区（静态区）3.栈区4.堆区

//内存四区&#xff1a;1.代码区 2.全局区 3.栈区 4.堆区 1.放在代码区的有&#xff1a;1.写的代码&#xff1a;只读的、共享的、存放的二进制机器指令、由操作系统直接管理 2.放在全局区的有&#xff1a;1.全局的&#xff08;变量或常量&#xff09; 2.静态的&#xff0…
阅读更多...
基于ESP8266—AT指令连接阿里云+MQTT透传数据（1）

基于ESP8266—AT指令连接阿里云+MQTT透传数据（1）

在阿里云创建MQTT产品的过程涉及几个关键步骤，主要包括注册阿里云账号、实名认证、开通MQTT服务实例、创建产品与设备等。以下是详细的步骤说明： 一、准备工作 访问阿里云官网，点击注册按钮，填写相关信息（如账号、密码、手机号等）完成注册。注册完成后，需要对账号进行实…
阅读更多...
Python爬虫之requests（二）

Python爬虫之requests（二）

Python爬虫之requests&#xff08;二&#xff09; 前面演示了requests模块的四种请求方式。接下来再来演示下综合的练习。 一、requests模块综合练习 需求&#xff1a;爬取搜狗知乎某一个词条对应的某个范围页码表示的页面数据。 点开搜狗首页&#xff0c;有一个知乎的版块…
阅读更多...
敏感字段加密 - 华为OD统一考试(E卷)

敏感字段加密 - 华为OD统一考试(E卷)

2024华为OD机试（E卷+D卷+C卷）最新题库【超值优惠】Java/Python/C++合集 题目描述 【敏感字段加密】给定一个由多个命令字组成的命令字符串: 1、字符串长度小于等于127字节，只包含大小写字母，数字，下划线和偶数个双引号; 2、命令字之间以一个或多个下划线 进行分割; 3、可…
阅读更多...
登录功能开发 P167重点

登录功能开发 P167重点

会话技术&#xff1a; cookie jwt令牌会话技术&#xff1a; jwt生成&#xff1a; Claims&#xff1a;jwt中的第二部分 过滤器&#xff1a; 拦截器&#xff1a; 前端无法识别controller方法&#xff0c;因此存在Dispa什么的
阅读更多...
QT——初识

QT——初识

目录 前言 1.创建一个QT项目 2.查看生成的文件 3.打印一条hello world&#xff01; ①使用控件实现 ②使用代码实现 4.Qt的编码格式 5.信号和槽 6.Qt中的坐标系 前言 QT是一款可跨平台的电脑客户端开发软件&#xff0c;本文将介绍一些有关QT使用的基础内容。 1.创建一个…
阅读更多...
介绍我经常使用的两款轻便易用的 JSON 工具

介绍我经常使用的两款轻便易用的 JSON 工具

第一款是 Chrome Extension&#xff0c;名叫 JSON Viewer Pro&#xff0c;可以在 Chrome 应用商店下载&#xff1a; 点击右上角的 JSON Input&#xff0c;然后可以直接把 JSON 字符串内容粘贴进去&#xff0c;也直接直接加载本地 JSON 文件。 可以在树形显示和图形显示两种模式…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023