Html和Css中的空格

最新推荐文章于 2024-06-29 00:08:14 发布

优资园

最新推荐文章于 2024-06-29 00:08:14 发布

阅读量3.3k

点赞数

分类专栏： css 文章标签： css html 空格空格 white-space

本文链接：https://blog.csdn.net/zshsats/article/details/82386939

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Html和Css中的空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css空格</title>
    <style>
        .test1,.test2,.test3,.test4,.test5{
            display: block;
            width: 100px;
            height: 230px;
            background:red;
        }
        .test3{
            white-space:pre;
        }
        .test4{
            white-space:pre-wrap;
        }
        .test5{
            white-space:pre-line;
        }
        body{
            padding-bottom: 500px;
        }
    </style>
</head>
<body>
<h3>正常</h3>
<p class="test1">我若有先知讲道之能，也明白各样的奥秘，各样的知识，而且有全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>

<h3>空格</h3>
<p class="test2">我若&nbsp;&nbsp;&nbsp;&nbsp;有先知讲道&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;之能，也明白各样的奥秘，各样的知识，而且有全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>

<h3>white-space:pre</h3>
<p class="test3">我若有先知讲道     之能，也明白各样        的奥秘，各样的知识，而且有            全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>

<h3>white-space:pre-wrap</h3>
<p class="test4">我若有先知讲道     之能，也明白各样        的奥秘，各样的知识，而且有            全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>


<h3>white-space:pre-line</h3>
<p class="test5">我若有先知讲道     之能，也明白各样        的奥秘，各样的知识，而且有            全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
等价于
<p class="test1">我若有先知讲道&nbsp;之能，也明白各样&nbsp;的奥秘，各样的知识，而且有&nbsp;全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
</body>
</html>