textarea、div、pre中如何使用空白、换行符 | 您所在的位置:网站首页 › 英语简单造句训练 › textarea、div、pre中如何使用空白、换行符 |
我们都知道,html的“容器”元素可以通过white-sapce属性实现对空白、换行符的设置,可参考这篇文章:https://blog.csdn.net/liuxiao723846/article/details/118994673 本文介绍主要的容器元素textarea、div、pre中如何处理空白、换行符。 1、textarea:textarea元素本身具有white-space:pre-wrap属性。我们看个例子: textarea test\ttextarea\ntest\ttextarea\ntest\ttest textarea test textarea test textarea test test const str = "a\nb\tc\rd" document.getElementById("t3").value=str;效果: 结论:textarea本身具有white-space:pre-wrap属性,所以t2和t3是有空白、换行的效果。 2、div:看一个例子: div { border:1px solid #000;width:160px;height: 150px;margin:5px; float:left;display:inline; } div test\tdiv\ntest\tdiv div test div test div div test\tdiv\ntest\tdiv div test div test div div test\tdiv\ntest\tdiv div test div test div const str = "a\nb\tc\rd" document.getElementById("d3").innerHTML=str; document.getElementById("d6").innerHTML=str; document.getElementById("d9").innerHTML=str;效果: 结论:无论是否可编辑的div,都需要手动添加white-sapce属性来实现空白、换行符号效果。 3、pre:pre元素本身具有white-space:pre属性。我们看个例子: pre { border:1px solid #000;width:160px;height: 150px;margin:5px; float:left;display:inline; } pre test\tpre\ntest\tpre pre test pre test pre pre test\tpre\ntest\tpre pre test pre test pre const str = "a\nb\tc\rd" document.getElementById("p3").innerHTML=str; document.getElementById("p6").innerHTML=str;效果 结论:和textarea一样。 |
CopyRight 2018-2019 实验室设备网 版权所有 |