换行案

最新推荐文章于 2023-08-31 14:46:23 发布

wangning_elsa

最新推荐文章于 2023-08-31 14:46:23 发布

阅读量313

点赞数

分类专栏：前端特性

本文链接：https://blog.csdn.net/wangning_elsa/article/details/80140680

版权

前端特性专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
    <html lang="zh-CN">
<head>
    <title>换行案</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <style>
        body {
            background-color: #fbfbfb;
            margin: 60px 40px;  
        }
        blockquote {
            max-width: 1200px;
        }
        h3::before {
          content: "哈\A哈";
          white-space: pre;
        }
        h3::after {
          content: "嘿\n嘿";
          white-space: pre;
        }
        h4::before {
          content: "哈&#xa;哈";
          white-space: pre;
        }
        h4::after {
          content: "嘿</br>嘿";
          white-space: pre;
        }
        h5::before {
          content: attr(date-content);
          white-space: pre;
        }
        h5::after {
          content: "嘿\A嘿";
          white-space: pre;
        }
        h6::before {
          content: attr(date-content);
          white-space: pre;
        }
        .title {
            color: #7c07c2;
        }
        img {
            width: 120px;
            height: 120px;
        }
    </style>
<head>
<body>
    <script>
    </script>
    <div class="home-category"> 
        <h2 class="title">常规添加node</h1>
        <div id="append-wrapper">
                <div id="append"></div>
                <div id="inner"></div>
                <div id="escape"></div>                                             
        </div>
        <blockquote>
            HTML 实体
            在 HTML 中，某些字符是预留的。
            在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
            如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
            </br>
            字符实体（Character Entity）分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；第三部分是一个分号。同一个符号，可以用“实体名称”和“实体编号”两种方式引用，“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它，而“实体编号”则没有这种担忧，但它实在不方便记忆。
        </blockquote>


        <h2 class="title">添加空格</h2>
        <blockquote>
            通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 &nbsp; 表示空格。
        </blockquote>
        <div id="space-wrapper">
            <p>空白 格</p>                                         
            <p>空白&nbsp;格</p>
            <p>多个空白    格</p>                                                                                                    
            <p>多个空白&nbsp;&nbsp;&nbsp;格</p>                                          
        </div>

        <p>
            &nbsp;常用于传输中空格被过滤掉或合并为一个的情况，怎么显示他为字符串呢?
        </p>
        <p>显示他为字符串&amp;nbsp;</p>


        <h2 class="title">添加换行</h1>
        <div id="enter-wrapper">
            1.使用&lt/br&gt换行
            <div id="br"></div>
            2.使用\n换行
            <p>alert 弹框中要实现换行，只能通过\n的方式，而不能通过&lt/br&gt的方式<p>
            <p>.innerHTML/ html( )方法中使用\n换行结果<p>
            <div id="innerhtml"></div>
            <blockquote>
                本来的换行符变成了空格！在字符串中的\n其实和你在字符串中输入 enter 键换行的效果是一样的，在 HTML 里多于一个空格都按照一个空格显示，所以原本的换行符就变成了一个空格。但其实这个换行符依然在 HTML 中，此时用 console.log查看，会看到控制台打印出来的字符串是有空行效果的。
            </blockquote>
            <!-- document.getElementById('innerhtml').innerHTML -->
            <p>innerText,pre,textarea等更多效果参见https://segmentfault.com/a/1190000003936301</p> 
            3. 使用content属性换行
            <p>\A和\n</p>
            <h3>h3</h3>
            <p>&amp;#xa;和&lt/br&gt</p>
            <h4>h4</h4>
            <p>attr(date-content)+&amp;#xa;和\A</p>
            <h5 date-content="哈&#xa;哈">h5</h5>
            <p>attr(date-content)+\n</p>
            <h6 date-content="哈\n哈">h6</h6>
            <h2 class="title">遇到一个需求？愉快的解决了？</h2>
<!--            <div class="credit_desc_icon hint--right" aria-label='{{{auth.creditDesc | unescape }}}'></div>

            filters: {
                unescape(html) {
                     return html.replace(/&#xa;/g, "\n");
                }
            }, -->
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMo8H1NOruUyH6j_2aLIXUHrY34fLZ3ZcstsQXx_rqLA99N4te"/>
            <p>嗯，西柚</p>
        </div>      
    </div>
    <script>
        var newDiv = document.createElement("div"); 
        var newContent = document.createTextNode("appendChild"); 
        newDiv.appendChild(newContent);
        document.getElementById('append').appendChild(newDiv);

        function escapeChars(str) {
            str = str.replace(/&/g, '&amp;');
            str = str.replace(/</g, '&lt;');
            str = str.replace(/>/g, '&gt;');
            str = str.replace(/'/g, '&acute;');
            str = str.replace(/"/g, '&quot;');
            str = str.replace(/|/g, '&brvbar;');
            return str;
        }
        var str = '<a href="#">哈哈哈</a>';
        document.getElementById('inner').innerHTML = str;
        document.getElementById('escape').innerHTML = escapeChars(str);


        var content = '使用&lt/br&gt</br>换行';
        document.getElementById('br').innerHTML = content;
var content = '您确定要删除</br>这行代码吗？';
// alert(content);
var content = '您确定要删除\n这行代码吗？';
// alert(content);

        var content = '换行\n这行代吗？';
        document.getElementById('innerhtml').innerHTML=content;
    </script>
</body>
</html>

wangning_elsa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
换行案

&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;title&gt;换行案&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&quo
复制链接

扫一扫

专栏目录