非换行空白：non-breaking space

最新推荐文章于 2025-04-11 09:43:26 发布

会做饭的技术男

最新推荐文章于 2025-04-11 09:43:26 发布

阅读量616

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2bj0ia1ihaa.html

版权

前端专栏收录该内容

2507 篇文章

订阅专栏

本文详细介绍了不可断空白字符（NBSP）的概念及其在HTML和Unicode中的编码方式。NBSP防止自动换行，并保持相邻字符在同一行，同时避免连续空格被压缩。文章通过实例展示了在JS和HTML中如何使用不可断空白。

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

一维基百科（英文版）词条

In word processing and digital typesetting, a non-breaking space (" ") (also called no-break space, non-breakable space (NBSP), hard space, or fixed space) is a space character that prevents an automatic line break at its position. In some formats, including HTML, it also prevents consecutive whitespace characters from collapsing into a single space.

In HTML, the common non-breaking space, which is the same width as the ordinary space character, is encoded as   or  . In Unicode, it is encoded as U+00A0.

1 不可中断空白连同前面一个、后面一个字符都在同一行，不会换行。

2 多个不可中断空白不会被视为一个字符

3 不可中断字符，在js中是\xA0，在html中是 

二代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:10px 0 0 0;
                padding:0;
            }
            .box{
                width:50px;
                height:50px;
                background:grey;
                font-size: 16px;
            }
        </style>
    </head>
    <body style="padding:0 50px;">
        <div class="box" id="box01">
            
        </div>
        <div class="box" id="box02">
            
        </div>
        <script>
            var str01 = '奥路\xA0\xA0\xA0\xA0\xA0\xA0\xA0\xA0菲';
            document.getElementById('box01').innerHTML = str01;
            var str02 = '奥路&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菲';
            document.getElementById('box02').innerHTML = str02;
        </script>
    </body>
</html>

三页面效果