css中的white-space属性

最新推荐文章于 2025-04-11 17:31:49 发布

chaoguo1234

最新推荐文章于 2025-04-11 17:31:49 发布

阅读量580

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/chaoguo1234/article/details/81277616

本文详细介绍了CSS中white-space属性的功能及用法，包括如何处理元素内的空白符、换行符，以及不同属性值（如normal、pre、nowrap等）的效果对比。

css中的white-space用来处理布局过程中元素内的空白符。

white-sapce:

normol: 默认值，空白会被浏览器忽略。

<html>
    <head>
        <title>WhiteSpace</title>
        <style type = "text/css">
        span {
            white-space: normal;
            background: silver;
        }
        </style>
    </head>
    <body>
        <span>      
                Some text。
            Some text。
        Some text。
        </span>
    </body>
</html>

运行结果：
元素标签两端的空白符被忽略，但字符之间的空白保留。

pre: 元素之间的空白符不被忽略。类似HTML标签中的<pre>

<html>
    <head>
        <title>WhiteSpace</title>
        <style type = "text/css">
        span {
            white-space: normal;
            background: silver;
        }
        </style>
    </head>
    <body>
        <span>      
                Some text。
            Some text。
        Some text。
        </span>
    </body>
</html>

运行结果(火狐):

可以看到标签元素之间的空白符被保留了。

nowrap: 文本不会换行，文本会在一行之间继续，直到遇到 标签

<html>
    <head>
        <title>WhiteSpace</title>
        <style type = "text/css">
        span {
            white-space: nowrap;
            background: silver;
        }
        div {
            width: 200px;
            background: gold;
            padding: 10px;
        }
        </style>
    </head>
    <body>
    <div>
        <span>      
                    Some text。
            Some text。
        Some text。
        Some text。
        Some text。
        Some text。
        Some text。
        Some text。
        </span>
    </div>
    </body>
</html>

运行结果:

元素标签之间的空格以及每行换行符被忽略。文本但是文本不会自动换行，一直溢出了div框。

<html>
    <head>
        <title>WhiteSpace</title>
        <style type = "text/css">
        span {
            white-space: pre-wrap;
            background: silver;
        }
        </style>
    </head>
    <body>
        <span>      
                    Some text。
            Some text。
        Some text。
        </span>
    </body>
</html>

运行结果(火狐)：

元素标签之间的空白被保留，换行符也被保留。

pre-line: 合并空白符序，但是保留换行符。

<html>
    <head>
        <title>WhiteSpace</title>
        <style type = "text/css">
        span {
            white-space: pre-line;
            background: silver;
        }
        </style>
    </head>
    <body>
        <span>      
                    Some text。
            Some text。
        Some text。
        </span>
    </body>
</html>