当前位置：首页 > news >正文

css3新特性第三章(文本属性)

news 2025/11/4 14:22:25

一、文本属性

文本阴影
文本换行
文本溢出
文本修饰
文本描边

1.1 文本阴影

在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需写，水平阴影的位置。允许负值。
v-shadow	必需写，垂直阴影的位置。允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色

公共代码

<body><div class="box1">你好啊！</div></body>

写法一（两个值）

text-shadow: 3px 3px;

代表的是水平和垂直方向阴影的距离

效果

在这里插入图片描述

写法二（三个值）

/* 第二种写法三个值背景颜色*/

text-shadow: 3px 3px pink;

效果

在这里插入图片描述

写法三(四个值)

/* 第三种写法四个值模糊程度背景颜色*/

text-shadow: 0px 0px 5px pink;

效果

在这里插入图片描述

案例小技巧使用

我们一般水平和垂直方法不设置偏移量，只设置模糊程度和背景颜色

技巧1

/* 使用小技巧1 */

color: white;

text-shadow: 0px 0px 15px black;

在这里插入图片描述

技巧2

/* 使用小技巧2 设置整个body为黑色 */

color: white;

font-size: 80px;

text-shadow: 0px 0px 25px red;

在这里插入图片描述

1.2 文本换行

在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。

常用值如下：

值	含义
normal	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre	原样输出，与 pre 标签的效果相同。
pre-wrap	在 pre 效果的基础上，超出元素边界自动换行。
pre-line	在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
nowrap	强制不换行

公共代码部分

.box1 {width: 400px;height: 400px;border: 1px solid #000;font-size: 20px;}
<body><div class="box1">寄黄几复   黄庭坚·宋     我居北海君南海 寄雁传书谢不能桃李春风一杯酒江湖夜雨十年灯持家但有四立壁治病不蕲三折肱想见读书头已白隔溪猿哭瘴溪藤</div></body>

默认值 normal

white-space: normal;

pre

/* 按原文显示，如果超出了宽度，也会原样输出 */

white-space: pre;

在这里插入图片描述

pre-wrap

这个时候我们将其中一行增加长度超出文本宽度长度

  <div class="box1">寄黄几复   黄庭坚·宋     我居北海君南海 我居北海君南海 我居北海君南海 我居北海君南海 我居北海君南海 我居北海君南海 寄雁传书谢不能桃李春风一杯酒江湖夜雨十年灯持家但有四立壁治病不蕲三折肱想见读书头已白隔溪猿哭瘴溪藤</div>

在这里插入图片描述

pre-line

/* 如果一行过长，会自动换一行显示，特点：文本始末空格都给出掉了，只认换行 */

white-space: pre-line;

在这里插入图片描述

nowrap

/* 所有的文本都不换行，都放到一行 */

white-space: nowrap;

在这里插入图片描述

none

默认值，默认是 none 什么都不处理

1.3 文本溢出

在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：

值含义
clip 当内联内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis 当内联内容溢出块容器时，将溢出部分替换为 … 。
注意

要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为 nowrap 值

值	含义
clip	当内联内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis	当内联内容溢出块容器时，将溢出部分替换为 … 。

基础代码

 ul {width: 400px;height: 400px;border: 1px solid black;font-size: 20px;list-style: none;padding: 10px;}
<ul><li>新闻1短标题1</li><li>共同擘画中越命运共同体建设新蓝图</li><li>这条轻轨，见证了xx情谊</li><li>增长940%，突然爆火！xxxxxxx大幅度发的：堪称“省钱利器”</li><li>多家媒体发表报道称，经过多年高强度研发，三大 AI 巨头在开发新模型时，回报和努力开始不成正比：OpenAI训练的新模型“Orion”未能达到预期，Google的Gemini新模型同样表现不佳，而Anthropic推迟了Claude新版本的发布时间。</li>

```

clip

超出文字部分截掉，这个的前提是需要设置文字不换行，并且需要设置 overflow 的属性

li {

margin-bottom: 10px;

white-space: nowrap;

/* 这个属性必须写 visible 不写就可以了*/

overflow: hidden;

/* 文字溢出第一种超出文字部分截掉 */

text-overflow: clip;

}

在这里插入图片描述

ellipsis

超出文字部分用…替代,看起来效果更好一些

li {

margin-bottom: 10px;

white-space: nowrap;

/* 这个属性必须写 visible 不写就可以了*/

overflow: hidden;

/* 文字溢出第二种超出文字部分用…替代 */

text-overflow: ellipsis;

}

在这里插入图片描述

1.4 文本修饰

CSS3 升级了 text-decoration 属性，让其变成了复合属性。

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor
子属性及其含义：
- text-decoration-line 设置文本装饰线的位置
  - none ：指定文字无装饰（默认值）
  - underline ：指定文字的装饰是下划线
  - overline ：指定文字的装饰是上划线
  - line-through ：指定文字的装饰是贯穿线
- text-decoration-style 文本装饰线条的形状
  - solid ：实线（默认）
  - double ：双线
  - dotted ：点状线条
  - dashed ：虚线
  - wavy ：波浪线
- text-decoration-color 文本装饰线条的颜色

单独设置各个属性

 h1 {font-size: 100px;/* text-decoration: line-through; *//* 单独设置线   上划线*/text-decoration-line: overline;/* 虚线 */text-decoration-style: dashed;/* 颜色 */text-decoration-color: pink;}</style>
</head>
<body><h1>你好啊！欢迎你来玩</h1>
</body>

在这里插入图片描述

复合属性设置

/* 复合属性破浪线*/

text-decoration: overline wavy pink;

在这里插入图片描述

1.5 文本描边

注意：文字描边功能仅 webkit 内核浏览器支持。

-webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
-webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
-webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。

效果+代码

 <style>h1 {font-size: 50px;-webkit-text-stroke-color: deeppink;-webkit-text-stroke-width: 3px;/* 空闲文字 */color: transparent;}</style>
</head>
<body><h1>欢迎光临 会员中心</h1>
</body>

在这里插入图片描述