textarea如何在展示时候显示多个空格和换行

用textarea存储到的内容，在前端如果使用div展示的话，对于换行和多余的空格默认不展示。可以通过以下两种方式进行展示。

<textare>
我是文字，我是文字，     我是文字，我是文字
我是文字
</textare>

方案1：使用样式 white-space: pre-wrap

优点： 支持空白和换行换行
缺点： 无

<style>.info {whilte-space: pre-wrap;}
</style>
<div class="info">{{ textareContent }}</pre>

方案2：使用 pre 标签

用pre标签包裹存通过textarea存储的内容。

优点： 支持多个空格和换行
缺点： 无法继承font-family，需要重新定义

<style>.pre {font-family: ''Microsoft YaHei' }
</style>
<pre class="pre">{{ textareContent }}</pre>

效果

textarea如何在展示时候显示多个空格和换行相关推荐

前端使用el-input输入框保存的数据，怎么样在展示时显示输入的空格、tab、回车，可以使用pre标签
项目场景: 使用input输入框,但是想让在input框输入的空格.tab.回车等在网页上直接显示,那么可以使用pre来展示. 解决方案: element的el-input输入框: <el-in ...
php上传多张图片为什么只显示一张,javascript,_js多张图片上传也拿到多张图片的路径在页面上展示只显示一张？只执行了一次？？？，javascript - phpStudy...
js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录页面展示分页显示数据添加用户信息 (单个/批量)删除用户编辑 ...
＜textarea＞＜/textarea＞ placeholder属性不显示
起始标签和结束标签间不能有有空格,换行也不行 <textarea rows="" cols="" placeholder="123"& ...
HTML识别文本空格回车换行展示
今天写一个信息展示页面,从后台获取到textare输入的内容有文本格式,但是直接把值赋进 <p> 标签内,显示是以文本格式输出,不符合预期,经查资料,将解决办法整理如下: 1. 使用 &l ...
vue.js 回显textarea入的空格和换行
一.场景:用户在表单或者textarea中输入的带空格和换行的内容提交后,在其他地方查看输入内容必须与输入的内容保持一致. 输入时: 展示时: 二.实现 //输入时<div class=&quo ...
Java黑皮书课后题第7章：7.15（消除重复）使用下面的方法头编写方法，消除数组中重复出现的值。编写一个测试程序，读取10个数，调用该方法，并显示以一个空格分隔的不同数字
7.15(消除重复)使用下面的方法头编写方法,消除数组中重复出现的值.编写一个测试程序,读取10个数,调用该方法,并显示以一个空格分隔的不同数字题目题目描述与运行示例破题代码 21.11.11 ...
Delphi Label显示多行文本的换行方法
Label 其字面意思是标记:示踪剂:带垂饰的横带. Delphi 中往往使用在表示某个功能.变量等属性的诠释和标注.哪在 Delphi 中如何让 Label 换行处理多个字符呢? 我们有以下几种 ...
微信小程序连续显示多个空格
因为在开发的时候,遇到了要连续显示多个空格的情况,回去翻阅文档,浪费了一定的时间,故作此记录. 使用text组件解码解决

textarea如何在展示时候显示多个空格和换行

方案1：使用样式 white-space: pre-wrap

方案2：使用 pre 标签

效果

textarea如何在展示时候显示多个空格和换行相关推荐

最新文章

热门文章