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

最新推荐文章于 2024-07-17 21:13:25 发布

kaka_hikun

最新推荐文章于 2024-07-17 21:13:25 发布

阅读量536

点赞数

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

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106556309

版权

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、文字阴影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>

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

kaka_hikun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习-42文字阴影与自动换行

一、文字阴影text-shadow使用方法：text-shadow: length length length color第一个和第二个length分别是阴影离开文字的横、纵方向距离，第三个length是阴影的模糊程度，length越大，模糊越厉害，第四个color是阴影的颜色设置<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>文字阴
复制链接

扫一扫