CSS文本格式化

news2024/9/27 20:07:43

通过 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.coloradmin.cn/o/2170895.html

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

相关文章

面试题-部分

面试题-部分

目录 1. 从输入url到渲染页面&#xff0c;中间经历了什么&#xff1f; 2. vue中的v-if和v-show有什么区别 3. 什么是Css中的回流&#xff08;重排&#xff09;与重绘 4. 介绍一下let、const、var的区别 5. 箭头函数和普通函数有什么区别 6. Css中常用的水平垂直居中解决方…
阅读更多...
传输大咖49 | 科学研究院跨网文件交换高效、安全解决方案

传输大咖49 | 科学研究院跨网文件交换高效、安全解决方案

在科学研究领域&#xff0c;数据的价值堪比黄金。科学研究所的日常运作依赖于大量的数据交换&#xff0c;高效的文件交换系统离不开内部合作和与外部合作伙伴的交流。然而&#xff0c;随着数据量的激增和网络环境的复杂性&#xff0c;传统的文件交换方法很难满足需求。本文将讨…
阅读更多...
RK3568 android11 适配鼎桥MT5710-CN 5G模块

RK3568 android11 适配鼎桥MT5710-CN 5G模块

一，概述 鼎桥MT571X设备和Android系统主要通过USB接口进行数据通信，Android系统上的Linux内核需要根据鼎桥模块设备上报的USB设备接口加载USB驱动，USB驱动正确加载后，鼎桥模块才能正常工作。 Android系统中支持鼎桥模块设备相关的Linux内核驱动架构，如下图所示： 在Lin…
阅读更多...
js删除emoji表情问题

js删除emoji表情问题

emoji标签占位两个 &#xff0c;直接删除后一位会出现乱码符&#xff1b; 判断是否是emoji function isEmoji(char) {let code char.charCodeAt(0);return code>55296&&code<57343 } // 使用方法&#xff0c;传入单字符 console.log(isEmoji(1)); // false con…
阅读更多...
Kubernetes 配置管理

Kubernetes 配置管理

一、什么是 ConfigMap&#xff1f; 在传统架构中&#xff0c;配置文件往往被保存在宿主机上&#xff0c;程序启动是可以指定某个配置文件&#xff0c;但是使用容器部署时&#xff0c;容器所在的节点并不固定&#xff0c;所以不能使用这种方式&#xff0c;此处在构建镜像时&…
阅读更多...
【Redis】主从复制（下）--主从复制原理和流程

【Redis】主从复制（下）--主从复制原理和流程

文章目录 主从复制原理主从节点建立复制流程图数据同步 psyncpsync的语法格式 psync运行流程全量复制全量复制的流程全量复制的缺陷有磁盘复制 vs 无磁盘复制 部分复制部分复制的流程复制积压缓冲区 实时复制 主从复制原理 主从节点建立复制流程图 保存主节点的信息从节点(sla…
阅读更多...
感悟：糟糠之妻不下堂和现在女性觉醒的关系

感悟：糟糠之妻不下堂和现在女性觉醒的关系

古人说“糟糠之妻不下堂”真是害惨了中国女性&#xff0c;古代之所以有这一说法&#xff0c;大概是因为男子可以三妻四妾&#xff0c;妻子永远是正妻&#xff0c;也不需要讲究什么从一而终&#xff0c;更不会讲什么男德&#xff0c;只会要求女性学习女德、女训之类&#xff0c;…
阅读更多...
性能测试：性能测试报告

性能测试：性能测试报告

性能测试报告是性能测试的产出物之一&#xff0c;它是对系统性能测试结果和数据的总结和分析&#xff0c;记录了系统在不同负载和场景下的性能表现和性能问题。性能测试报告提供了有关系统性能的详细信息&#xff0c;供项目团队、开发人员和其他相关利益相关者参考。 性能测试…
阅读更多...
原生app云打包，更换图标，和名称。PDA的安装正式包

原生app云打包，更换图标，和名称。PDA的安装正式包

原生app云打包 复制下载即可&#xff0c;是正式版
阅读更多...
Android下MVP和MVVM模式的实践

Android下MVP和MVVM模式的实践

转载注明出处&#xff1a;https://blog.csdn.net/skysukai 1、前言 MVP和MVVM诞生已经好些年头了&#xff0c;记得刚毕业才参加工作的时候&#xff0c;第一次见到了有上万行的Activity&#xff0c;这种巨无霸的Activity维护起来简直就是噩梦。这时候&#xff0c;就需要进行代…
阅读更多...
商标价值如何评估与增值？

商标价值如何评估与增值？

商标是企业的标志&#xff0c;代表着企业的产品或服务质量、信誉和形象。一个具有高知名度和美誉度的商标&#xff0c;能够为企业带来巨大的商业价值。它不仅可以帮助企业在市场中脱颖而出&#xff0c;吸引消费者的关注和购买&#xff0c;还可以作为企业的重要资产进行融资、并…
阅读更多...
无人便利店无人超市云值守收银系统源码

无人便利店无人超市云值守收银系统源码

随着人力成本越来越高&#xff0c;很多门店越来想做无人值守模式&#xff0c;尤其是晚上休息时间等想让云值守客服来看店。自然要求收银系统需要可以在【有收银员值守】和【无收银员值守】两种模式灵活切换。 1. 有收银员值守模式 白天有收银员在店&#xff0c;收银员可以协助…
阅读更多...
Tomcat服务与运用

Tomcat服务与运用

案例准备 1.规划节点 IP 主机名 节点 192.168.20.20 tomcat Tomcat 2.基础准备 使用VMWare Workstation软件安装CentOS 7.2操作系统&#xff0c;镜像使用提供的CentOS-7-x86_64-DVD-1804.iso&#xff0c;最小化安装CentOS 7.2系统 案例实施 1.基础环境配置 1.1修改…
阅读更多...
微信小程序的 button 标签的边框如何去除？

微信小程序的 button 标签的边框如何去除？

目录 问题描述&#xff1a; 问题原因&#xff1a; 解决办法&#xff1a; 方案一 方案二 问题描述&#xff1a; 实际开发中会发现这个 button 自带有样式&#xff0c;当背景颜色设置为白色的时候还有一个黑色的边框&#xff0c;刚开始那个边框怎么都去不掉 无法去除的边框…
阅读更多...
IRR 之 24期免息等于免费？钱买保险还是余额宝？

IRR 之 24期免息等于免费？钱买保险还是余额宝？

一、IRR 是什么&#xff1f; 英文全称是 Internal Rate of Return 具体公式可以参考公众号 随园经济56&#xff5c;内部收益率 简单理解可以为&#xff1a; IRR是投资项目在整个生命周期中所能获得的平均年化收益率 更简单理解为&#xff0c;余额宝展现给你的年化收益 二、…
阅读更多...
WLS2连接本地USB设备的方法

WLS2连接本地USB设备的方法

WLS2连接本地USB设备的方法 说明windows端1.下载usbipd-win并安装2.启动WSL3.以管理员身份运行Windows PowerShell”4.WSL中查看USB设备 说明 WLS2连接本地USB设备的方法 windows端 1.下载usbipd-win并安装 可下载**.msi文件&#xff0c;双击即可安装 2.启动WSL 3.以管理…
阅读更多...
如何将Excel表格嵌入Web网页在线预览、编辑并保存到自己服务器上？

如何将Excel表格嵌入Web网页在线预览、编辑并保存到自己服务器上？

猿大师办公助手作为一款专业级的网页编辑Office方案&#xff0c;不仅可以把微软Office、金山WPS和永中Office的Word文档内嵌到浏览器网页中实现在线预览、编辑保存等操作&#xff0c;还可以把微软Office、金山WPS和永中Office的Excel表格实现网页中在线预览、编辑并保存到服务器…
阅读更多...
如何在Windows、Mac和Linux系统上安装和更新Stable Diffusion WebUI

如何在Windows、Mac和Linux系统上安装和更新Stable Diffusion WebUI

在图像生成领域&#xff0c;Stable Diffusion与Automatic1111表现出色&#xff0c;给MidJourney、OpenAI的DALL-E和Bing图像生成器带来了激烈的竞争。在本文中&#xff0c;我们将帮助您在本地安装Automatic1111 WebUI&#xff0c;以便您可以从文本提示创建出色的图像。 要生成…
阅读更多...
原生代理IP是什么？

原生代理IP是什么？

代理IP的各个类型称呼有很多&#xff0c;且它们在网络使用和隐私保护方面扮演着不同的角色。今天将探讨什么是原生IP以及原生IP和住宅IP之间的区别&#xff0c;帮助大家更好地理解这两者的概念和实际应用&#xff0c;并选择适合自己的IP类型。 一、什么是原生IP&#xff1f; 原…
阅读更多...
智慧防灾，科技先行：EasyCVR平台助力地质灾害视频监测系统建设

智慧防灾，科技先行：EasyCVR平台助力地质灾害视频监测系统建设

随着科技的飞速发展&#xff0c;视频监控技术已成为地质灾害监测与预警的重要手段之一。在众多视频监控平台中&#xff0c;EasyCVR视频汇聚平台凭借其强大的视频整合、实时传输、视频处理及分发等能力&#xff0c;在地质灾害场景中展现出显著的应用优势。 一、实时监测与远程监…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023