我将文本放入<textarea>
像这样:
First day
1-one apple.
2-one orange.
3-two cups of milk.
但它显示在<label>
像这样:
First day 1- one apple. 2-one orange. 3- two cups of milks.
我怎样才能让它看起来和a中的一样<textarea>
?
给个标签white-space: pre-wrap
它会像文本区域一样断行
textarea {
height: 70px;
}
label {
white-space: pre-wrap;
}
<textarea>
First day
1-one apple.
2-one orange.
3-two cups of milk.
</textarea>
<br><br>
<label>
First day
1-one apple.
2-one orange.
3-two cups of milk.
</label>
除了white-space
属性与换行符相结合(例如\n
), HTML 断行方式是使用<br>
,这里添加一个小示例,它们如何工作和不同。
请注意,即使是空格也可以使用例如保留white-space: pre
,如“内联”代码示例中所示
var sample_script = document.querySelector('.sample.script');
var name = "One Two Three";
var name1 = name.replace(/ /g, '\n');
var name2 = name.replace(/ /g, '<br>');
sample_script.innerHTML += name1;
sample_script.innerHTML += "<br><br>";
sample_script.innerHTML += name2;
div.pre {
white-space: pre;
}
/* styling for this demo */
body {display: flex;}
.sample {flex: 1; margin: 0 20px;}
<div class="sample inline">
Inline
<hr>
<div>
One
Two
Three
</div>
<div class="pre">
One
Two
Three
</div>
</div>
<div class="sample script">
Script
<hr>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)