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

最新推荐文章于 2023-12-08 11:21:54 发布

赶路人儿

最新推荐文章于 2023-12-08 11:21:54 发布

阅读量3k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/liuxiao723846/article/details/118998462

版权

web前端专栏收录该内容

294 篇文章 13 订阅

订阅专栏

我们都知道，html的“容器”元素可以通过white-sapce属性实现对空白、换行符的设置，可参考这篇文章：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>

效果：

结论：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>

效果：

结论：无论是否可编辑的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>

效果