CSS对文本处理的那些操作操作

最新推荐文章于 2024-05-10 16:30:00 发布

一碗周.

最新推荐文章于 2024-05-10 16:30:00 发布

阅读量394

点赞数 2

分类专栏：从头学前端文章标签： css css3 前端 html5 html

本文链接：https://blog.csdn.net/weixin_46163658/article/details/119884838

版权

从头学前端专栏收录该内容

55 篇文章 21 订阅

订阅专栏

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第十八篇-《CSS对文本的处理》

编写不易转载请获得允许

写在前面

本篇文章我们将来学习CSS中对文本的处理，通过本篇文章的学习可以掌握的内容如下图所示：

00_导读.png

文本装饰

在CSS中是通过text-ecoration属性来设置HTML页面中文本的装饰的（下划线、顶划线、删除线），该属性可以设置装饰线的类型（也就是下划线、顶划线等），还可以设置装饰线的颜色以及样式（实线、虚线等）。示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>文字装饰</title>
        <style>
            p {
                /*
                    第一个属性，设置装饰线的类型，该属性可以设置如下四个值
                    * none 无效果
                    * line-through 删除线效果
                    * underline 下划线效果
                    * overline 顶部有一条线
                    第二个属性，设置装饰性的颜色，可以设置任何颜色值
                    第三个属性，设置线的类型，其值如下：
                    * solid 画一条实线
                    * double 画一条双实线
                    * dotted 画一条点划线
                    * dashed 画一条虚线
                    * wavy 画一条波浪线
                */
                text-decoration: underline #f0f double;
            }
        </style>
    </head>
    <body>
        <p>text-decoration属性</p>
    </body>
</html>

代码运行结果如下图所示：

01_text-decoration属性.png

text-ecoration属性其实是一个简写属性，可以将其拆分为如下三个属性：

text-decoration-line属性：设置装饰线的类型
text-decoration-color属性：设置装饰性的颜色
text-decoration-style属性：设置线的类型

行高

CSS中是通过line-height属性来设置一行文字的高度，文字会在这个高度中居中。该属性的值有如下几种：

数字值：数字值会乘当前的字体大小作为行高（建议使用数字值）
长度值：可以设置具体的px值来作为行高
百分比：如果设置百分比的话，这个百分比会乘当前的字体大小作为行高

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>行高</title>
        <style>
            p {
                line-height: 2.5;
            }
        </style>
    </head>
    <body>
        <p>这是一段中文</p>
    </body>
</html>

代码运行结果如下图所示：

02_行高.png

字符与字词间距

字符间距

CSS中提供的letter-spacing属性来用设置每个字符之间的间距，该属性的值除默认值normal外，还可以设置一个长度值，这个长度值为负数。示例代码如下所示：

.first-example {
  letter-spacing: 0.4em;
}

.second-example {
  letter-spacing: 1em;
}

.third-example {
  letter-spacing: -0.05em;
}

.fourth-example {
  letter-spacing: 6px;
}

代码运行结果如下图所示：

03_字符间距.png

字词间距

CSS中提供的word-spacing属性可以用来设置每个单词之间的间距，用法与letter-spacing属性类似。示例代码如下：

.first-example {
  word-spacing: 15px;
}

.second-example {
  word-spacing: 5em;
}

代码运行结果如下图所示：

单词间距.png

文字缩进

CSS中使用text-indent属性来设置HTML页面中的首行文字内容之前的缩进量（块级元素）。

如下示例代码展示了text-indent属性的用法：

.example {
    text-indent: 5em;
}

代码运行结果如下图所示：

04_文本缩进.png

文字阴影

在CSS中使用text-shadow属性来制作文字的阴影效果，该属性的值可以传递4个，依次为颜色、水平偏移量、垂直偏移量和模糊程度。如下示例代码展示了text-shadow属性的用法：

p {
    /* 
    第一个属性表示阴影颜色
    第二个属性表示水平偏移量
    第三个属性表示垂直偏移量
    第四个属性表示模糊程度
        */
    text-shadow: royalblue 10px 5px 3px;
}

代码运行结果如下图所示：

05_文字阴影.png

text-shadow属性还可以制造多重阴影的效果，只需要用逗号分割多个设置即可。如下示例代码展示了text-shadow属性多重阴影的用法：

p {
    text-shadow: royalblue 10px 5px 3px, lightcoral -10px -5px 3px;
}

代码运行结果如下图所示：

05_文字阴影02.png

水平对齐

CSS中使用text-align属性来实现文本的水平对齐方式，该属性常用的值有三个，分别是：

left：表示左对齐（默认）
center：表示居中对齐
right：表示右对齐

如下示例代码展示了text-align属性的用法：

css

body {
    margin: 0;
    padding: 20px;
}
p {
    background-color: lightcoral;
}
.p1 {
    text-align: left;
}
.p2 {
    text-align: center;
}
.p3 {
    text-align: right;
}
h3 {
    text-align: center;
}

html

<body>
    <h3>左对齐</h3>
    <p class="p1">
        Don't be afraid to shoot a single horse. What about being alone and
        brave? You can cry all the way, but you can't be angry. You have to
        go through the days when nobody cares about it to welcome applause
        and flowers.
    </p>
    <h3>居中对齐</h3>
    <p class="p2">
        Don't be afraid to shoot a single horse. What about being alone and
        brave? You can cry all the way, but you can't be angry. You have to
        go through the days when nobody cares about it to welcome applause
        and flowers.
    </p>
    <h3>右对齐</h3>
    <p class="p3">
        Don't be afraid to shoot a single horse. What about being alone and
        brave? You can cry all the way, but you can't be angry. You have to
        go through the days when nobody cares about it to welcome applause
        and flowers.
    </p>
</body>

代码运行结果如下图所示：

06_水平对齐.png

垂直对齐

在CSS中使用vertical-align属性来设置文本（准确的说是内联元素或者表格）的垂直方向的对齐方式。

vertical-align属性常用的值也有三个，分别是：

top：表示行内的顶部对齐，如果是表格的话则表示表格顶部
middle：表示行内居中对齐
bottom：表示底部对齐

关于表格和内联元素的内容，我们将会在后面进行学习。

如下示例代码展示了text-align属性的用法：

css

span {
    font-size: 12px;
}
h1 {
    background-color: aquamarine;
}
.top span {
    vertical-align: top;
}
.middle span {
    vertical-align: middle;
}
.bottom span {
    vertical-align: bottom;
}

html

<body>
    <h1 class="top">
        垂直对齐方式中的
        <span>❤</span>
        顶对齐
    </h1>
    <h1 class="middle">
        垂直对齐方式中的
        <span>❤</span>
        居中对齐
    </h1>
    <h1 class="bottom">
        垂直对齐方式中的
        <span>❤</span>
        底对齐
    </h1>
</body>

代码运行结果如下图所示：

07_垂直对齐.png

文本换行

在CSS中处理文本换行的属性包含两个，分别是overflow-wrap属性和word-break属性。

overflow-wrap属性

CSS中提供的overflow-wrap属性用于当HTML页面中的文本超区容器时换行时的处理方式，该属性包含两个值，分别是：

normal：这个值是默认值，它会使在单词结束处换行
break-word：这个属性会将单词在容器结尾处强制将单词分割

如下示例代码展示了overflow-wrap属性的用法：

css

.text {
    width: 230px;
    background: lightcoral;
}

.break-word {
    overflow-wrap: break-word;
}

html

<body>
    <p class="text">
        This is a test of English, it may be very long very
        longlonglonglonglonglonglonglong, this is to test out the final
        effect.
    </p>
    <p class="text break-word">
        This is a test of English, it may be very long very
        longlonglonglonglonglonglonglong, this is to test out the final
        effect.
    </p>
</body>

代码运行结果如下图所示：

08_overflow-wrap属性.png

word-break属性

CSS中的word-break属性用于处理HTML页面中中文内容自动换行的处理方式。其属性值如下所示：

normal：默认的换行行为
break-all：对于除中文、日文和韩文的文本内容，可在任意字符间断行
keep-all：中文、日文和韩文的文本内容不断行，其他语言的文本内容等同于normal

如下示例代码展示了word-break属性的用法：

css

body {
    margin: 0;
    padding: 20px;
}
.text {
    width: 320px;
    background-color: lightcoral;
}

.normal {
    word-break: normal;
}

.breakAll {
    word-break: break-all;
}

.keepAll {
    word-break: keep-all;
}

html

<body>
    <h3>1. word-break: normal</h3>
    <p class="normal text">
        This is a long and Honorificabilitudinitatibus
        califragilisticexpialidocious
        longlonglonglonglonglonglonglonglonglonglonglonglonglong
        ノドがかわくハラがへるなのにチカラがわいてくるキズがうずくアセがとぶだけ
    </p>

    <h3>2. word-break: break-all</h3>
    <p class="breakAll text">
        This is a long and Honorificabilitudinitatibus
        califragilisticexpialidocious
        longlonglonglonglonglonglonglonglonglonglonglonglonglong
        ノドがかわくハラがへるなのにチカラがわいてくるキズがうずくアセがとぶだけ
    </p>

    <h3>3. word-break: keep-all</h3>
    <p class="keepAll text">
        This is a long and Honorificabilitudinitatibus
        califragilisticexpialidocious
        longlonglonglonglonglonglonglonglonglonglonglonglonglong
        ノドがかわくハラがへるなのにチカラがわいてくるキズがうずくアセがとぶだけ
    </p>
</body>

代码运行结果如下图所示：

09_word-break属性.png

处理空格折叠

CSS中提供的white-space属性就是用来处理HTML中空格自动折叠的问题的，该属性中的值比较多，下表展示了各种值得情况：

	换行符	空格和制表符	文字转行
`normal`	合并	合并	转行
`nowrap`	合并	合并	不转行
`pre`	保留	保留	不转行
`pre-wrap`	保留	保留	转行
`pre-line`	保留	合并	转行
`break-spaces`	保留	保留	转行

上表出自MDN

总结

总结.png

预告：下一篇文章我们将来学习HTML中的<a>标签以及其样式的处理

一碗周.

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS对文本处理的那些操作操作

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端????????‍????，如果我写的文章有幸可以得到你的青睐，万分有幸~这是【从头学前端】系列文章的第十八篇-《CSS对文本的处理》编写不易转载请获得允许写在前面本篇文章我们将来学习CSS中对文本的处理，通过本篇文章的学习可以掌握的内容如下图所示：文本装饰在CSS中是通过text-ecoration属性来设置HTML页面中文本的装饰的（下划线、顶划线、删除线），该属性可以设置装饰线的类型（也就是下划线、顶划
复制链接

扫一扫