css文本属性

原创已于 2025-07-30 10:40:50 修改 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-07-30 10:40:30 首次发布

CSS文本属性

css文本属性可以定义文本的外观。通过文本属性可以文本的颜色、字符间距、对齐文本、装饰文本、文本缩进等

文本缩进

text_indent属性将页面上段落的第一行首航缩进，这是一种最常见的文本格式化的效果。取值：

用长度指定文本的缩进为负值
用百分比指定文本的缩进为负值

p{
    text-indent:20px;
}
p{
    text-indent:20%;
}

文本对齐
text-align可以为文本设置水平对齐方式。取值：

left:：内容左对齐
center：内容居中对齐
right：内容右对齐
justify:内容两端对齐，但是对最后一行无效
注意：样式应用的最后一行文字不会生效如果只有一行及第一行同为最后一行

li-01 {
    text-align:left;
}
li-02 {
    text-align:right;
}
li-03 {
    text-align:center;
}
li-04 {
    text-align:justify;
}

案例：解决justify的问题

单行：

<style>
    p.test {
        width: 100%;
        border: 1px solid #f00;
        text-align-last: justify;
    }
</style>
<p class="test">
   只有一行很短的文字
</p>

运行结果：

如果有多行文字


<!--方法二
使用伪元素：
需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行
设定after的width为100%，生成第二行
设置为行内快元素，设置的width才有效
-->
<style>
    p.test {
        text-align: justify;
    }
    p.test:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
</style>
<p class="test">
    只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字只有一行很短的文字
</p>

运行结果

案例：使用实现表单中名称两端对齐

<style>
    label {
        display: inline-block;
        width: 70px;
        /* 重点代码 */
        text-align: justify;
        text-align-last: justify;
        margin-right: 10px;
    }
</style>
<!-- 如果只有一行文字 -->
<div class="box">
    <form action="">
        <div class="item">
            <label for="username">用户名</label>
            <input type="text" name="" id="username">
        </div>
        <div class="item">
            <label for="pwd">密码</label>
            <input type="password" name="" id="pwd">
        </div>
        <div class="item">
            <label for="repwd">重复密码</label>
            <input type="password" name="" id="repwd">
        </div>
    </form>
</div>

文本修饰

text-decoration 属性设置⽂本装饰线条的位置，综合属性可以单独设置 text-decoration-line、 text-decoration-color 和 text-decoration-style 属性 text-decoration-line

none 指定⽂字⽆装饰
underline 指定⽂字的装饰是下划线
overline 指定⽂字的装饰是上划线
line-through 指定⽂字的装饰是贯穿线

注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条 text-decoration-style

solid 线条显示为单行
double 线条显示为双线
dotted 线条显示为点线
dashed 线条显示为虚线
wavy 线条显示为波浪线

.under {
    text-decoration: underline red;
}
.over {
    text-decoration: wavy overline orange;
}
.lineThough {
    text-decoration: line-through;
} 
.none {
    text-decoration: none;
}
.under01 {
    text-decoration-line: overline underline;
}

单词间距

word-spacing 属性设置英⽂单词之间的间距取值：

normal：默认间隔
：⽤⻓度值指定间隔。可以为负值

p {
    word-spacing:20px;
}

文本间距

letter-spacing 属性设置字符之间的间距，适⽤于中英⽂⽂本取值：

normal：默认间隔
：⽤⻓度值指定间隔。可以为负值

p {
    letter-spacing:20px;
}

⽂本换⾏

1.6.1 word-wrap 让文字换行

word-wrap 属性设置⽂本内部⻓单词或URL换⾏取值：

normal 默认值（浏览器保持默认处理）。
break-word 在⻓单词或 URL 地址内部进⾏换⾏。

1.6.1 word-break

word-break 属性设置⾃动换⾏的处理⽅法取值：

normal 使⽤浏览器默认的换⾏规则。
break-all 允许在单词内换⾏。
keep-all 只能在半⻆空格或连字符处换⾏。

1.6.3 white-space 不允许文字换行

nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。

16.4 text-overflow 当文本溢出包含元素时剪切文字

ellipsis 显示省略符号来代表被修剪的文本。

<style>
  .box{
    width: 300px;
    border: 1px solid #f00;
    white-space: nowrap;
    /*溢出隐藏*/
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div class="box">
  这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本
</div>

案例：单行/多行文本省略

<!-- 案例：单行文本省略 -->
<style>
  ul{
    width: 400px;
  }
  li{
    width: 100%;
    float: left;
    /* 不让文字换行 */
    white-space: nowrap;
    /*溢出隐藏 */
    overflow: hidden;
    /*添加省略符号 */
    text-overflow: ellipsis;
  }
</style>
<ul>
  <li>中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
  <li>念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
  <li>外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
  <li>今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
  <li>俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
</ul>

<!-- 多行文本省略 -->
<style>
  ul{
    width: 200px;
  }
  li{
    width: 100%;
    margin-top: 30px;
    margin-left: 30px;
    /* 标签变为弹性盒子 */
    display: -webkit-box;
    /*按照垂直方向排序 */
    -webkit-box-orient: vertical;
    /*保留对应的行数 */
    -webkit-line-clamp: 2;
    /*多余的行数隐藏 */
    overflow: hidden;
  }
</style>
</head>
<body>
    <ul>
        <li>1.中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
        <li>2.念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
        <li>3.外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
        <li>4.今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
        <li>5.俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
    </ul>
 </body>

文本颜色

color 属性设置⽂本颜⾊取值：

：指定颜⾊

颜⾊⾊值

CSS颜⾊取值⽅式：

⼗六进制⾊
RGB 颜⾊
RGBA 颜⾊
预定义/跨浏览器颜⾊名

⼗六进制⾊

⽬前所有浏览器都⽀持⼗六进制颜⾊⼗六进制颜⾊是这样规定的：#RRGGBB，其中的 RR（红⾊）、GG（绿⾊）、BB（蓝⾊）⼗六进制整数规定了颜⾊的成分。所有值必须介于 0 与 FF 之间⼗六进制颜⾊计数： 0 1 2 3 4 5 6 7 8 9 a(10) b(11) c(12) d(13) e(14) f(15) 组合⽽成

p {
    color: #f00;
}
div {
    color: #ff6700
}

RGB颜⾊

所有浏览器都⽀持RGB颜⾊ RGB 颜⾊值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue)定义颜⾊的强度，可以是介于 0 与 255 之间的整数，或者是百分⽐值（从 0% 到 100%）

p {
    color: rgb(255, 0, 0)
}

RGBA颜⾊

RGBA 颜⾊值得到以下浏览器的⽀持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。 RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了不透明度。 RGBA 颜⾊值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

p {
    color: rgba(255, 0, 0, 0.5)
}

预定义/跨浏览器颜⾊名

所有浏览器都⽀持颜⾊名 HTML 和 CSS 颜⾊规范中定义了 147 中颜⾊名（17 种标准颜⾊加 130 种其他颜⾊）。 17 种标准⾊是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

p {
    color: red;
}

文字阴影text-shadow【css3】

text-shadow 属性向文本设置阴影。

语法：text-shadow: x-shadow y-shadow blur color;

x-shadow	必需。水平阴影的位置。允许负值。
**y-shadow	必需。垂直阴影的位置。允许负值。
**blur	可选。模糊的距离。
**color	可选。阴影的颜色。

/* 单层阴影 */
p.info {
    text-shadow: -5px -5px 3px black;
    font-size: 50px;
}
/* 多层阴影 */
p {
    text-shadow: 5px 5px 3px red,8px 8px 3px orange,11px 11px 3px yellow,14px 14px 3px green,17px 17px 3px yellowgreen,20px 20px 3px greenyellow,23px 23px 3px blue;
    font-size: 50px;
}
/* 正阴影 */
div {
    text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px #ff00de;
    font-size: 50px;
}

盒子阴影box-shadow【css3】

box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

.box2 {
    width: 150px;
    height: 200px;
    background-color: antiquewhite;
    /*
    内阴影
    box-shadow: 0px 0px 15px 0px #000 inset;
    */
}
/* 小米商品鼠标悬浮阴影 */
.box2:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}

text-stroke

是用来为文本添加描边效果的css属性，但请注意，它并非标准CSS属性，而是WebKit（如Safari和Chrome）浏览器专有的CSS扩展属性，为了兼容其他浏览器，通常会配合 -webkit-text-stroke 和 -moz-text-stroke 等私有前缀属性一起使用

-webkit-text-stroke: stroke-width color;
-moz-text-stroke: stroke-width color;

需要注意的是，使用-webkit-text-stroke会导致文本的渲染性能下降，特别是当文本内容非常多或者在移动设备上时，可能会影响到性能和体验。

属性	描述
stroke-width	规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。
color	描边的颜色，可以是任何有效的CSS颜色值，比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。

stroke-width 规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。

<style>
.container1 {
    -webkit-text-stroke: 1px red;
}
.container2 {
    -webkit-text-stroke: 0.06em red;
}

</style>
<div class="container container1">1像素宽的红色描边</div>
<div class="container container2">0.06em的红色描边</div>

color 描边的颜色。可以是任何有效的CSS颜色值，比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。

.container1 {
    -webkit-text-stroke: 1px red;
}
.container2 {
    -webkit-text-stroke: 1px green;
}

案例：镂空文字

.container {
    font-size: 36px;
    color: transparent;
}
.container1 {
    -webkit-text-stroke: 1px red;
}

拓展1：多行/多行文本垂直居中

单行文本垂直居中

<style>
.box{
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
    line-height: 300px;
}
</style>
<div class='box'>
  比如，当前热映《长清湖》超越了《你好，李焕英》票房
</div>

多行文本垂直居中

<style>
  .box{
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
    /* 将div修改为table单元格的特性 */
    display: table-cell;
    /* 垂直居中 */
    vertical-align: middle;
  }
</style>
<div class='box'>
  比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），还有人和。贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，不大卖都难。
</div>