首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue中{{ }}如何解析出textarea换行符

vue中{{ }}如何解析出textarea换行符

作者头像
用户9914333
发布于 2022-07-22 06:22:58
发布于 2022-07-22 06:22:58
2.9K01
代码可运行
举报
文章被收录于专栏:bug收集bug收集
运行总次数:1
代码可运行

问题:

vue中,将textarea进行v-model绑定后,在使用{{ }}显示时,换行不生效,直接显示成空格

代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div>
        {{summary}}
</div>
<textarea v-model="summary" cols="30" rows="10"></textarea>

运行效果:

解决方案:

在展示的div添加样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.pre-line {
white-space: pre-line;
}

修改后代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div  class="pre-line">
        {{summary}}
</div>
<textarea v-model="summary" cols="30" rows="10"></textarea>

运行效果:

由上图,可以看出,换行显示正常了

知识扩展:

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

可能的值

描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。

inherit

规定应该从父元素继承 white-space 属性的值。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》013-Vue 组件的属性和方法:表单数据的双向绑定
在现代 Web 开发中,表单是与用户交互的重要组成部分,而数据的管理与同步则是确保良好用户体验的关键。Vue.js 作为一个灵活而强大的前端框架,通过其独特的双向绑定机制,使得表单数据的处理变得更加简单和高效。无论是文本输入框、选择框还是复选框,Vue 能够轻松实现视图与数据的实时同步。
愚公搬代码
2025/06/30
820
熟悉white-space
white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
RobinsonZhang
2018/08/28
9210
不简单的 white-space 属性
white-space 是 CSS 的属性。从字面上来看,这是一个与空白相关的属性。好像也没啥东西,但从其实没那么简单。
前端GoGoGo
2018/08/24
1.3K0
【CSS】419- 彻底搞懂word-break、word-wrap、white-space
可以看到,nbsp; 和 </br> 可以正常发挥作用,而连续的空格会被缩减成一个(比如This和is之间的三个空格变成了一个),换行符也全都无效。句子超过一行后会自动换行,而长度超过一行的单个单词会超出边界。
pingan8787
2019/11/25
3.9K0
微信小程序----CSS 的空格处理
---- 效果 HTML <p> Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! </p> CSS p{ width: 200px; background-color: lightblue; } 改变 white-space 的值的效果 微信小程序----CSS 的空格处理 white-space 的值 值
Rattenking
2021/02/01
2.1K0
微信小程序----CSS 的空格处理
CSS3新特性应用之字体排印
一、插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素。 +:表示同辈元素的兄弟元素。 \A:一个空白换行符 解决方案: 在dd与dt相邻的dt上的子元素前面加入一个空白换行符 在相邻的dd与dd之间,加入一个逗号 示例代码: <head> <meta charset="UTF-8"> <title>Document</title> <style> dt, dd{
sam dragon
2018/01/17
8730
使用 white-space属性 来实现保留文本域 textarea的换行格式和空格格式
昨天产品需求评审,产品经理收到用户的反馈,在系统中有一些文本域,用户希望在在文本中填写的文本内容和格式都能够被保留下来,目前只能保存文本内容,对于文本域的换行和空格,在显示的时候都没有正确显示。
拿我格子衫来
2022/02/17
5.8K5
CSS white-space 控制空白和换行
以前只是记得在某些样式中需要控制换行似乎才用这个样式,今天我才知道这个属性有这么多的属性值可以设置,其实这个样式关注的是对空白和换行符的处理,尤其是几个pre开头的值,非常的实用啊,对于保留空格效果是很有用的,保证格式的同时又可以保证html 标签能够解析:
前Thoughtworks-杨焱
2021/12/07
8670
如何在 IE6,7 下实现 white-space: pre-wrap;
HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。
botkenni
2019/09/03
2.8K0
如何在 IE6,7 下实现 white-space: pre-wrap;
这样理解white-space属性的取值,你会不知不觉的记住了所有
white-space这个属性就是用来处理空格的,主要有五个取值(normal,nowrap,pre,pre-wrap,pre-line)。要知道它们是如何控制文本的,通过demo演示,我来详细说一下。
Javanx
2019/09/04
21.9K0
这样理解white-space属性的取值,你会不知不觉的记住了所有
6 个没人讲过的 CSS 属性
自 1994 年以来,设计网站一直是 CSS 的唯一目的,它是一门描述网站外观的语言。
前端劝退师
2021/05/11
1K0
6 个没人讲过的 CSS 属性
CSS3文本
1、text-overflow clip: 隐藏超出文本 ellipsis: 超出部分使用省略号 文字超出部分裁剪掉: overflow:hidden; text-overflow:clip; 文字超出部分用省略号代替: overflow:hidden; text-overflow:ellipsis; white-space: nowrap; // 强制不换行 2、文本换行 word-wrap word-wrap 属性允许长单词或 URL 地址换行到下一行 normal: 只在允许的断字点换行 break-
小胖
2018/06/27
4450
CSS 换行_css不允许换行
4、最近遇到的一个需求,v-html渲染文本的时候要求,单行里面有数字的时候文字左右对齐,间距自动拉伸
全栈程序员站长
2022/11/17
4.1K0
css3学习总结
一,结构选择器 2.属性选择器 3.CSS3伪类选择器 UI伪类选择器: :enabled选择启用状态元素 :disabled 选择禁用状态元素 :checked选择被选中的input元素(单选按钮或
wfaceboss
2019/04/08
8770
css3学习总结
css渲染(二) 文本
一、文本样式 首行缩进  text-indent   首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格。[注意]该属性可以为负值;应用于: 块级元素(包括bloc
柴小智
2018/04/10
1.3K0
css渲染(二) 文本
CSS让Li标签溢出后自动换行
最近搞新站修改页面模块的时候在手机端测试的时候发现li标签会溢出,电脑端则正常,如图:
AlexTao
2020/09/03
7.1K0
text-wrap:nowrap代码已经被弃用了,为什么部分浏览器还能生效?
哎呀,谈到text-wrap:nowrap,我就想起了它被弃用的原因。说实话,这个属性真是让人头疼啊!你说吧既然决定弃用了是不是就应该无效呢?并不是的,就这导致部分网友在复制文章的之后自带这个格式,使文章出现不能够自动换行的问题,比如谷歌浏览器,是的让程序员引以为豪的谷歌浏览器,让我们来看看text-wrap:nowrap到底是啥玩意儿。简单来说,这个属性是用来控制文本在超出容器宽度时是否换行的。如果设为nowrap,那就是不换行;如果不设或者设为normal,那就是自动换行。听起来挺好用的,对吧?
李洋博客
2024/05/06
6850
text-wrap:nowrap代码已经被弃用了,为什么部分浏览器还能生效?
「趣学前端」优雅又精致,来看看别人家的表格样式是怎样实现
我身边一些非互联网技术从业的朋友,偶尔看我转发到朋友圈的文章,会表示出一定的兴趣。前段时间,有朋友问我公众号的问题,所以我来了灵感,准备写一个趣学前端系列,适用于零基础、新手前端或者想把编程当做兴趣培养的人。
叶一一
2023/03/31
1.8K0
「趣学前端」优雅又精致,来看看别人家的表格样式是怎样实现
十五、Vue表单输入绑定
十五、Vue表单输入绑定
Java架构师必看
2021/05/14
1.4K0
十五、Vue表单输入绑定
如何让超出块级元素的内容使用省略号代替?
先看上面两幅图片,如果实现上面现象该如何 .main{ width: 100px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; } <div class="main"> 1111111111111111111111111111111111111111 </div> 必须overflow:hidden;和text-overflow:ellipsis组合才可以实现上述效果 ove
潇洒哥和黑大帅
2018/10/23
1.7K0
如何让超出块级元素的内容使用省略号代替?
推荐阅读
相关推荐
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》013-Vue 组件的属性和方法:表单数据的双向绑定
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验