white-space属性

最新推荐文章于 2023-02-27 13:35:09 发布

weixin_45545395

最新推荐文章于 2023-02-27 13:35:09 发布

阅读量2k

点赞数 3

文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_45545395/article/details/119085796

版权

white-space属性

根据MDN的文档，white-space CSS 属性是用来设置元素中的空白的。取值有

normal

文本会自动换行，连续的空白符会被合并，换行符会被当作空白符来处理。

在这里插入图片描述

nowrap

文本不会自动换行，会溢出显示，直到遇到 标签，连续的空白符会被合并。

在这里插入图片描述

pre

文本不会自动换行，会溢出显示，会保留多个空白符，遇到换行符和 标签会换行。这个值能很好地将文本按源代码的文本书写格式原样输出。

在这里插入图片描述

pre-wrap

会自动换行，连续的空白符会被保留，在遇到换行符或者 标签也会换行。

在这里插入图片描述

pre-line

会自动换行，连续的空白符会被合并，在遇到换行符或者 标签会换行。

在这里插入图片描述

break-spaces

与 pre-wrap的行为相同，但会保留所有空白字符，具体区别可以去MDN文档查看。

不同的打字机效果

利用CSS来写一个简单的打字机效果，当white-space属性值不同时可以实现不同效果。

当white-space:值为nowrap时，设置好动画可以实现依次打出字母。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            width: 100%;
            height:100vh;
            background-color: #222;
            display: flex;
            justify-content:center;
            align-items:center;
        }
        .word{
            font-family: monospace;
            color:#fff;
            font-size:15px;
            height: 20px;
            white-space: nowrap;
            overflow: hidden;
            width: 630px;
            border-right:2px solid white;
            animation:show 10s steps(86) 1s normal,
            flash 1s steps(86)  infinite normal;
        }
        
        @keyframes show{
            from{
                width:0px;
            }
            to{
                width:630px;
            }
        }
        @keyframes flash{
            from{
                border-right-color: #fff;
            }
            to{
                border-right-color:transparent;
            }
        }
    </style>
</head>
<body>
    <p class="word animation">he said, one day you will leave this world behind, so live a life you will remember.
    </p>
</body>
</html>

在这里插入图片描述

当white-space:值为normal时(默认)，由于会进行换行处理，可以实现整个电单词依次打出的效果，会留有空白。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            width: 100%;
            height:100vh;
            background-color: #222;
            display: flex;
            justify-content:center;
            align-items:center;
        }
        .word{
            font-family: monospace;
            color:#fff;
            font-size:15px;
            height: 20px;
            white-space: normal;
            overflow: hidden;
            width: 630px;
            border-right:2px solid white;
            animation:show 10s steps(86) 1s normal,
            flash 1s steps(86)  infinite normal;
        }
        
        @keyframes show{
            from{
                width:0px;
            }
            to{
                width:630px;
            }
        }
        @keyframes flash{
            from{
                border-right-color: #fff;
            }
            to{
                border-right-color:transparent;
            }
        }
    </style>
</head>
<body>
    <p class="word animation">he said, one day you will leave this world behind, so live a life you will remember.
    </p>
</body>
</html>

中文文本不受影响。

weixin_45545395

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
white-space属性

white-space属性根据MDN的文档，white-space CSS 属性是用来设置元素中的空白的。取值有normal文本会自动换行，连续的空白符会被合并，换行符会被当作空白符来处理。nowrap文本不会自动换行，会溢出显示，直到遇到 标签，连续的空白符会被合并。pre文本不会自动换行，会溢出显示，会保留多个空白符，遇到换行符和 标签会换行。这个值能很好地将文本按源代码的文本书写格式原样输出。pre-wrap会自动换行，连续的空白符会被保留，
复制链接

扫一扫