文字阴影与自动换行

最新推荐文章于 2024-05-07 11:30:15 发布

uncle_Huang

最新推荐文章于 2024-05-07 11:30:15 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/uncle_Huang/article/details/96432459

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍CSS中text-shadow属性的应用，展示如何通过不同参数设置实现丰富的文字阴影效果。同时，探讨word-break与word-wrap属性，以实现复杂的文本换行需求。

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

文字阴影与自动换行

1. text-shadow
text-shadow:length length length color
第一个length表示的是阴影离开文字的横坐标距离
第二个length表示的是阴影离开文字的纵坐标距离
第三个length表示的是阴影模糊半径
color表示阴影颜色

2. word-break

值	换行规则
normal 使用浏览器默认的规则
keep-all	只能在半角空格或连字符处理换行
break-all	允许在单词内换行

3. word-wrap

值	换行规则
normal	使用浏览器默认的规则
break-word	长单词或url地址自动换行

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字阴影与自动换行</title>
    <style type="text/css">
    h1{ 
        color: red;
        text-shadow:5px 5px 5px yellow,10px 10px 10px green,20px 20px 20px black;
    }
    #p1{
        word-break: keep-all;
    } 
    /* p{
        word-break: break-all;
    } */
    #p2{
        word-wrap: break-word;
    } 

    </style>
</head>
<body>
   <h1>魔道祖师</h1>
   <P id="p1">
        文案：
        前世的魏无羡万人唾骂，声名狼藉。被护持一生的师弟带人端了老巢，
        纵横一世，死无全尸。
        曾掀起腥风血雨的一代魔道祖师，重生成了一个……
        脑残。
        还特么是个人人喊打的断袖脑残！
        我见诸君多有病，料诸君见我应如是。
        但修鬼道不修仙，任你千军万马，十方恶霸，九州奇侠，高岭之花，
        但凡化为一抔黄土，统统收归旗下，为我所用，供我驱策！
   </P>
   <p id="p2">
        https://www.html.cn/book/css/properties/content/counter-reset.htm
        Text:

        Wei Wu of his predecessor's life was disreputable because he was abused by millions of people. Teachers and disciples who had been guarded for a lifetime took people to their nests.
        
        Throughout life, there are no dead bodies.
        
        The ancestors of the Devil Tao, who once set off a bloody storm, have regenerated a new generation...
        
        Brain-impaired.
        
        It's especially a broken sleeve and brain handicapped by everyone shouting and interrupting!
        
        I see that many of you are sick, and I expect you to see me like this.
        
        But ghost cultivation does not cultivate immortals, let you thousands of troops, ten bullies, Kyushu chivalrous swordsmen, Kaolin flowers,
        
        But all into a loess, all under the banner, for my use, for my drive!
   </p>
</body>
</html>