TextArea⽂本域输⼊内容原格式在页⾯展⽰解决⽅法:使⽤pre标签包括要展⽰⽂本内容的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>测试⽂本域原样输出</title>
</head>
<body>
<div>
<h2>测试⽂本域原样输出</h2>
<hr>
<!-- ⽂本域输⼊框 -->
<textarea id="txt1" ></textarea>
<!-- ⽂本内容展⽰ -->
<pre>
<div id='txt2'></div>
</pre>
<br>
<input type="button" id="btn" value="获取内容" onclick="getContent()">
</div>
html内容文本框
<script>
/
/ 获取输⼊的⽂本域⽂本,并在其他元素中展⽰
function getContent() {
var ele = ElementById('txt1');
}
</script>
</body>
</html>
效果:
存在问题:如果展⽰框的宽度⼩于输⼊框的宽度时,⽂字会默认不换⾏,导致溢出
解决办法:设置pre标签样式
pre {
white-space: pre-wrap;
/*word-wrap: break-word;*/
}
样式属性说明:
值| 描述
-|-|-
normal 默认| 空⽩会被浏览器忽略 |
pre | 空⽩会被浏览器保留。其⾏为⽅式类似 HTML 中的标签 | nowrap| ⽂本不会换⾏,⽂本会在在同⼀⾏上继续,直到遇到标签为⽌ | pre-wrap| 保留空⽩符序列,但是正常地进⾏换⾏ |
pre-line| 合并空⽩符序列,但是保留换⾏符 |
inherit | 规定应该从⽗元素继承 white-space 属性的值 |
添加样式后的效果:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。