textarea、div、pre中如何使用空白、换行符

绝地灬酷狼 2022-08-31 02:16 165阅读 0赞

我们都知道，html的“容器”元素可以通过white-sapce属性实现对空白、换行符的设置，可参考这篇文章：[https://blog.csdn.net/liuxiao723846/article/details/118994673][https_blog.csdn.net_liuxiao723846_article_details_118994673]

本文介绍主要的容器元素textarea、div、pre中如何处理空白、换行符。

### 1、textarea： ###

textarea元素本身具有white-space:pre-wrap属性。我们看个例子：

<html>
    <body>
    
    <textarea id="t1" cols="60" rows="10">
    textarea test\ttextarea\ntest\ttextarea\ntest\ttest
    </textarea>
    
    <textarea id="t2" cols="30" rows="10">
    textarea test	textarea
    test	textarea
    test	test
    </textarea>
    
    <textarea id="t3" cols="30" rows="10"></textarea>
    
    <script type="text/javascript">
        const str = "a\nb\tc\rd"
        document.getElementById("t3").value=str;
    </script>
    </body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

结论：textarea本身具有white-space:pre-wrap属性，所以t2和t3是有空白、换行的效果。

### 2、div： ###

看一个例子：

<html>
    <style>
    div {
    	border:1px solid #000;width:160px;height: 150px;margin:5px;
    	float:left;display:inline;
    }
    </style>
    <body>
    
    <div id="d1">div test\tdiv\ntest\tdiv</div>
    <div id="d2">
    div test	div
    test	div
    </div>
    <div id="d3"></div>
    
    <div id="d4" style="white-space: pre">div test\tdiv\ntest\tdiv</div>
    <div id="d5" style="white-space: pre">
    div test	div
    test	div
    </div>
    <div id="d6" style="white-space: pre"></div>
    
    <div id="d7" contenteditable="true">div test\tdiv\ntest\tdiv</div>
    <div id="d8" contenteditable="true">
    div test	div
    test	div
    </div>
    <div id="d9" contenteditable="true"></div>
     
    <script type="text/javascript">
    const str = "a\nb\tc\rd"
    
    document.getElementById("d3").innerHTML=str;
    document.getElementById("d6").innerHTML=str;
    document.getElementById("d9").innerHTML=str;
    
    
    </script>
    </body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1][]

结论：无论是否可编辑的div，都需要手动添加white-sapce属性来实现空白、换行符号效果。

### 3、pre： ###

pre元素本身具有white-space:pre属性。我们看个例子：

<html>
    <style>
    pre {
    	border:1px solid #000;width:160px;height: 150px;margin:5px;
    	float:left;display:inline;
    }
    </style>
    <body>
    
    <pre id="p1">pre test\tpre\ntest\tpre</pre>
    <pre id="p2">
    pre test	pre
    test	pre
    </pre>
    <pre id="p3"></pre>
    
    <pre id="p4" contenteditable="true">pre test\tpre\ntest\tpre</pre>
    <pre id="p5" contenteditable="true">
    pre test	pre
    test	pre
    </pre>
    <pre id="p6" contenteditable="true"></pre>
     
    <script type="text/javascript">
    const str = "a\nb\tc\rd"
    
    document.getElementById("p3").innerHTML=str;
    document.getElementById("p6").innerHTML=str;
    </script>
    </body>
    </html>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2][]

结论：和textarea一样。

[https_blog.csdn.net_liuxiao723846_article_details_118994673]: https://blog.csdn.net/liuxiao723846/article/details/118994673
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20220829/1457d5fbeef94d74a14e3499240735d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1]: /images/20220829/c2e9d7efc1d94d50b911b847df48ec21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2]: /images/20220829/5448b155daff4e58b21a894c9ce09ac5.png