一、文本属性
- 文本阴影
- 文本换行
- 文本溢出
- 文本修饰
- 文本描边
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 值
基础代码
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 文本装饰线条的颜色
- text-decoration-line 设置文本装饰线的位置
单独设置各个属性
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>
