js学习-42文字阴影与自动换行

最新推荐文章于 2025-04-17 20:52:44 发布

kaka_hikun

最新推荐文章于 2025-04-17 20:52:44 发布

阅读量633

点赞数

分类专栏： js学习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_48235555/article/details/106556309

版权

js学习专栏收录该内容

25 篇文章

订阅专栏

本文介绍CSS中文字阴影text-shadow的使用方法，包括如何设置阴影的距离、模糊程度和颜色，以及如何实现多层阴影效果。此外，还详细讲解了自动换行的三种策略：normal、keep-all和break-all，以及长单词与URL地址自动换行的word-wrap属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、文字阴影text-shadow

使用方法：
text-shadow: length length length color
第一个和第二个length分别是阴影离开文字的横、纵方向距离，第三个length是阴影的模糊程度，length越大，模糊越厉害，第四个color是阴影的颜色设置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文字阴影text-shadow</title>
    <style>
        h1{
           /* 可以同时设置多个阴影，只需要用逗号隔开 */            
           text-shadow: 15px 15px 5px #000 , 30px 30px 5px #f60 , 45px 45px 5px green;
        }
    </style>
</head>
<body>
<h1>文字阴影text-shadow</h1>
</body>
</html>

显示结果：
在这里插入图片描述

二、自动换行

1、文字换行

使用方法：
word-break: normal / keep-all / break-all ;
normal是默认规则，keep-all是只能在英文的半角空格或者中文的连字符换行，break-all是允许在中文逗号出现在行前第一个或者英文单词内换行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浏览器文本自动换行</title>
    <style>
        p#a,#b{
            word-break: break-all;
        }
        p#c,#d{
            word-break: keep-all;
        }
    </style>
</head>
<body>
<h1>浏览器文本自动换行</h1>
<p id="a">哈哈哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈</p>
<p id="b">I love you I love youloveyouIlove youI love youI love youIlove youIove youIloveyouI love youIloveyouIloveyouI
    love youI loyouIove youI love youI love youI love youI love youI love youI love you</p>
<p id="c">哈哈哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈哈哈哈哈哈哈哈，哈哈哈哈</p>
<p id="d">I love you I love youloveyouIlove youI love youI love youIlove youIove youIloveyouI love youIloveyouIloveyouI
    love youI loyouIove youI love youI love youI love youI love youI love youI love you</p>
</body>
</html>

显示结果：
在这里插入图片描述

2、长单词与URL地址自动换行

使用方法：
word-wrap: break-word;
可以实现缩小页面下的URL换行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>长单词与URL地址自动换行</title>
    <style>
        p{
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<h1>长单词与URL地址自动换行</h1>
<p>https://www.msn.cn/zh-cn/news/national/ar-BB14YhzF?ocid= spartanntpdsd dfaSAFFSDE EEFF SDDDSDF DFFVD ffdffghdfh cxvxf bfdbdf bgsb fgdfb dfvfgv
</p>
</body>
</html>

显示结果：
在这里插入图片描述