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.mzph.cn/web/54065.shtml

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

相关文章

linux远程桌面：xrdp 安装失败

linux远程桌面：xrdp 安装失败

window 如何远程 Linux 桌面 安装xrdp yum install xrdpsystemctl start xrdp 如果找不到软件包&#xff0c;就安装epel源&#xff0c;最好改成国内镜像的 在 /etc/yum.repos.d/ 下创建epel.repo,内容如下 [epel] nameExtra Packages for Enterprise Linux 7 - $basearch …
阅读更多...
实战OpenCV之形态学操作

实战OpenCV之形态学操作

基础入门 形态学操作是一种基于图像形状的处理方法，主要用于结构分析，比如：边缘检测、轮廓提取、噪声去除等。这些操作通常使用一个称为“结构元素”（Structuring Element）的核来进行，结构元素可以是任何形状，但最常见的有矩形和圆形。形态学操作的核心在于通过结构元素…
阅读更多...
Python爬虫selenium框架基本使用

Python爬虫selenium框架基本使用

一、安装导入 使用包管理器安装 pip3 install selenium 二、WebDriver工具 要使用这个工具我们需要保证安装了一个浏览器的驱动器。 Python的WebDriver是一个用于自动化Web浏览器操作的工具&#xff0c;它属于Selenium的一部分&#xff0c;特别是Selenium 2.0及以后版本中…
阅读更多...
【Kubernetes】常见面试题汇总（四十）

【Kubernetes】常见面试题汇总（四十）

目录 93. Kubelet 与 kubeproxy 作用。Kubeproxy 的三种代理模式和各自的原理以及它们的区别。 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 69-113 属…
阅读更多...
【拥抱AIGC】通义灵码扩展管理

【拥抱AIGC】通义灵码扩展管理

通义灵码提供了扩展管理&#xff0c;支持自定义指令&#xff0c;满足企业编码场景的扩展诉求。 适用版本 企业标准版、企业专属版 通义灵码管理员、组织内全局管理员&#xff08;专属版&#xff09;在通义灵码控制台-扩展管理中&#xff0c;进行自定义指令的管理、查看自定义…
阅读更多...
Unity2022.3.x各个版本bug集合及推荐稳定版本

Unity2022.3.x各个版本bug集合及推荐稳定版本

最近升级到Unity2022&#xff0c;发现以下问题&#xff0c;仅作参考 2022.3.0f1 - 2022.3.6f1 粒子渲染到RenderTexture闪屏 https://issuetracker.unity3d.com/issues/android-vulkan-visualisation-corruption-occurs-when-rendering-particles-to-render-texture 2022.3.…
阅读更多...
嵌入式必懂微控制器选型：STM32、ESP32、AVR与PIC的比较分析

嵌入式必懂微控制器选型：STM32、ESP32、AVR与PIC的比较分析

目录 1 微控制器基础概述 1.1 微控制器基本概念 1.2 工作原理及架构 1.3 STM32、ESP32、AVR和PIC简介 2 微控制器性能比较分析 2.1 性能比较 2.2 功耗比较 2.3 功耗分析 2.4 外设接口对比 3 应用场景与选择策略 3.1 物联网应用场景 3.2 工业控制场景 3.3 智能家居场…
阅读更多...
not exist 解决一对多 场景 条件过滤问题

not exist 解决一对多 场景 条件过滤问题

场景&#xff1a; 现在存在一对多关系&#xff0c;蓝色的盒子装的篮球&#xff0c;黄的的盒子装的黄球&#xff0c; 黑色的盒子 &#xff08;模拟工作类似场景&#xff09; boxIdballId蓝盒ID-15蓝盒ID-16蓝盒ID-17黄盒ID-212黄盒ID-215黄盒ID-216黑盒ID-38黑盒ID-39 需求&a…
阅读更多...
leetcode|刷算法 线段树原理以及模板

leetcode|刷算法 线段树原理以及模板

线段树出现的题目特征 线段树使用的题目。每次操作都要得到返回结果的。 比如 699. 掉落的方块 - 力扣&#xff08;LeetCode&#xff09; 2286. 以组为单位订音乐会的门票 - 力扣&#xff08;LeetCode&#xff09; 1845. 座位预约管理系统 - 力扣&#xff08;LeetCode&#…
阅读更多...
关于Java中的List＜User＞如何进行深拷贝

关于Java中的List＜User＞如何进行深拷贝

联调中发现了一个很初级&#xff0c;但有容易被忽略的拷贝问题&#xff1a; 错误方式&#xff1a;List<User> us new ArrayList<>(); // name "张三"List<User> us1 new ArrayList<>(us);for (User u : us) {...u.setName("douzi&q…
阅读更多...
【PHP陪玩系统源码】游戏陪玩系统app，陪玩小程序优势

【PHP陪玩系统源码】游戏陪玩系统app，陪玩小程序优势

陪玩系统开发运营级别陪玩成品搭建 支持二开源码交付&#xff0c;游戏开黑陪玩系统: 多客陪玩系统&#xff0c;游戏开黑陪玩&#xff0c;线下搭子&#xff0c;开黑陪玩系统 前端uniapp后端php&#xff0c;数据库MySQL 1、长时间的陪玩APP源码开发经验&#xff0c;始终坚持从客户…
阅读更多...
Docker镜像命令和容器命令

Docker镜像命令和容器命令

目录 镜像命令 镜像命名规范 镜像操作命令 DockerHub拉取镜像 利用docker save将nginx镜像导出磁盘&#xff0c;然后再通过load加载回来 总结 容器命令介绍和案例 容器相关命令 案例&#xff1a;创建运行一个Nginx容器 总结 镜像命令 镜像命名规范 镜像名称一般分两…
阅读更多...
uniapp框架中实现文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间

uniapp框架中实现文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间

前言 uni-file-picker是uniapp中的一个文件选择器组件，用于选择本地文件并返回选择的文件路径或文件信息。该组件支持选择单个文件或多个文件，可以设置文件的类型、大小限制，并且可以进行文件预览。 提示：以下是本篇文章正文内容，下面案例可供参考 uni-file-picker组件具…
阅读更多...
了解华为计算产品线，昇腾的业务都有哪些？

了解华为计算产品线，昇腾的业务都有哪些？

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 随着 ChatGPT 的现象级爆红&#xff0c;它引领了 AI 大模型时代的深刻变革&#xff0c;进而造成 AI 算力资源日益紧缺。与此同时&#xff0c;中美贸易战的持续也使得 AI 算力国产化适配成为必然趋势。 …
阅读更多...
【网站架构部署与优化】LVS负载均衡群集

【网站架构部署与优化】LVS负载均衡群集

文章目录 LVS负载均衡群集群集与分布式一、群集&#xff08;集群、Cluster&#xff09;群集的类型 二、分布式三、总结 LVS负载均衡的三种模式一、NAT 地址转换模式二、TUN IP隧道模式三、DR 直接路由模式LVS负载均衡的算法 部署实例LVS-NAT模式部署实例一、环境准备二、部署NF…
阅读更多...
Temporal Dynamic Quantization for Diffusion Models阅读

Temporal Dynamic Quantization for Diffusion Models阅读

文章目录 AbstractIntroductionBackgrounds and Related Works2.1 扩散模型2.2 量化2.3 量化感知训练和训练后量化 TemporalDynamic Quantization3.1 量化方法3.2 扩散模型量化的挑战3.3 TDQ模块的实现3.4 工程细节时间步的频率编码TDQ模块的初始化 Experimental SetupResults5…
阅读更多...
基于SpringBoot+Vue+MySQL的美食信息推荐系统

基于SpringBoot+Vue+MySQL的美食信息推荐系统

系统展示 用户前台界面 管理员后台界面 系统背景 在数字化时代&#xff0c;随着人们对美食文化的热爱与追求不断增长&#xff0c;美食信息推荐系统成为了连接食客与美食之间的重要桥梁。面对海量的美食信息&#xff0c;用户往往难以快速找到符合个人口味和需求的美食。因此&…
阅读更多...
实用工具推荐---- PDF 转换

实用工具推荐---- PDF 转换

直接上链接&#xff1a;爱PDF |面向 PDF 爱好者的在线 PDF 工具 (ilovepdf.com) 主要功能如下&#xff1a; 全免费&#xff01;&#xff01;&#xff01;&#xff01;
阅读更多...
FPGA远程烧录bit流

FPGA远程烧录bit流

FPGA远程烧录bit流 Vivado支持远程编译并下载bit流到本地xilinx开发板。具体操作就是在连接JTAG的远程电脑上安装hw_server.exe。比如硬件板在实验室或者是其他地方&#xff0c;开发代码与工程在本地计算机&#xff0c;如何将bit流烧录到实验室或者远程开发板&#xff1f; vi…
阅读更多...
机器学习-TopicModel

机器学习-TopicModel

概率图模型基础概率潜在语义分析&#xff08;PLSA&#xff09;LDA 概率图模型基础 猜球游戏 有两个信封&#xff0c;其中一个装有一个红球&#xff0c;一个黑球。另一个信封有两个黑球。 。 假设红球价值100元&#xff0c;黑球价值1元。 你随机从其中拿起一个信封&#xff0c;从…
阅读更多...
最新文章

Copyright @ 2022~2023