资讯专栏INFORMATION COLUMN

textarea中输入多个空格或者换行时只显示一个空格的解决办法

luffyZh / 2717人阅读

摘要:在输入多个空格多个空白行的情况下,前端读取都是直接以形式的字符串实现的,也就是说无论多少个连贯的空格空白行,都只会在展示该文本的元素内显示为一个空格。

最近在做一个类似留言板的功能,用户点击评论按钮时出现输入框(textarea),输入文本后点击发布会直接把输入框绑定的值(v-model)传给后端保存,再从后端取出来。
在输入多个空格/多个空白行的情况下,前端读/取都是直接以html形式的字符串实现的,也就是说无论多少个连贯的空格/空白行,都只会在展示该文本的元素内显示为一个空格。
查了一下解决办法:在包裹该展示内容的标签上加上属性“white-space: pre-wrap”即可。

此外还有以下三种方法都可以解决这类问题:

1) 使用转义字符,如" "等,代替手动输入的空格
2)使用全角空格,全角空格被解析为汉字处理
3)使用pre标签包裹文字

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114341.html

相关文章

  • 说一说“行”踩

    摘要:虽然效果一样,但是这两种换行的方式使用起来却不同。使用换行这种方式用起来比较坑,所以本文章的重点就是这一部分。因为之前知道弹框中要实现换行,只能通过的方式,而不能通过的方式。在元素上使用等方式,发现都是可以实现换行的。 前言 最近遇到这样一个需求:需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义,我们负责显示在页面即可,第三方要求这些文本需要换行显示即可。 我们都知道在...

    objc94 评论0 收藏0
  • 一个项目需求引发 - textarea行和空格

    摘要:显示的时候,从后台获取到文本之后,去掉文中的所有空格,然后显示在标签里面。这里我用一个小例子来示意一下在各种情况下的保存和显示。首先尝试,去掉所有的空格,首先想到的就是方法。 当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题。在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字都是在 te...

    TNFE 评论0 收藏0
  • 一个项目需求引发 - textarea行和空格

    摘要:显示的时候,从后台获取到文本之后,去掉文中的所有空格,然后显示在标签里面。这里我用一个小例子来示意一下在各种情况下的保存和显示。首先尝试,去掉所有的空格,首先想到的就是方法。 当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题。在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字都是在 te...

    Cheriselalala 评论0 收藏0
  • 关于input一些问题解决方法分享

    摘要:输入框首尾清除空格在中监听键盘事件移动端底部被弹出的键盘遮挡输入框是通过一直放在页面底部,当点击进行输入的时候,就会出现如下图片情况有的机型会遮挡一些。 前言 input是我们接受来自用户的数据常用标签,在前端开发中,相信每个人都会用到这个标签,所以在开发过程中也时候也会遇到一些问题,本文的内容是我在跟input相爱相杀过程中产生的,在此记录分享一下。如果喜欢的话可以点波赞/关注,支持...

    骞讳护 评论0 收藏0
  • 关于input一些问题解决方法分享

    摘要:输入框首尾清除空格在中监听键盘事件移动端底部被弹出的键盘遮挡输入框是通过一直放在页面底部,当点击进行输入的时候,就会出现如下图片情况有的机型会遮挡一些。 前言 input是我们接受来自用户的数据常用标签,在前端开发中,相信每个人都会用到这个标签,所以在开发过程中也时候也会遇到一些问题,本文的内容是我在跟input相爱相杀过程中产生的,在此记录分享一下。如果喜欢的话可以点波赞/关注,支持...

    vibiu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<