【无标题】Vue使用 pre-wrap换行 无效

已于 2023-01-29 17:56:13 修改
阅读量1k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js html css
于 2022-10-12 17:53:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taohuacsdn/article/details/127287501
本文介绍了解决Vue中元素文本超出自动换行的问题。当white-space:pre-wrap不起作用时，可以通过添加word-break:break-all与word-wrap:break-word来实现。此方案适用于需要调整文本显示方式的场景。

Vue中 元素超出换行使用 white-space: pre-wrap 无效的时候，可以添加以下两句话：

word-break: break-all;
word-wrap: break-word;

解释来源于菜鸟官网
在这里插入图片描述

因项目需求，通过多方查找资料与交流所得。如有侵权，请联系删除！

李小若98
关注
给文本加了white-space: pre-wrap却没有实现换行
TooManyDdficulty的博客
12-04 4198
今天做项目，遇到了个后端返回的数据是这样的，如下 {“errCode”:0,“errMsg”:“成功”,“data”:{“list”:[],“demand”:{“id”:903,“type”:“找人才”,“createDate”:“2020-11-27 09:57:26.0”,“keywords”:null,“orgName”:“广州健齿生物科技有限公司”,“isVail”:“0”,“contactName”:"-",“contactMobile”:“zhaopin@fsangels.com”,“cont
第三十九篇：关于部分手机white-space失效问题
maliyao4233的博客
11-21 894
原先用的 white-space: break-spaces;
vue 文本超出，换行展示，添加white-space: pre-wrap无效
张媛的博客
07-09 2160
解决：添加两个样式word-break: break-all; word-wrap: break-word;
ElementUI的表格换行符失效、不换行
江湖行骗老中医
09-08 1801
后台返回的接口数据 ‘“名称:示例↵ID:717”，在表格种并没有换行，原因是elementUI 在表格样式中写了white-space: normal; （normal空白会被浏览器忽略 \n、↵被忽略了） .el-table .cell { white-space: normal;} 解决办法： //方法一 重新定义，覆盖该属性 .el-table .cell{ white-space: pre-wrap; //保留空白符序列，但是正常地进行换行。 } //方法二 在特定容器下重新定义..
css文字换行问题white-space:pre-line或者white-space:pre-wrap，解决word-wrap:break-word解决不了的
w36680130的博客
12-21 694
css文字换行问题white-space:pre-line或者white-space:pre-wrap，解决word-wrap:break-word解决不了的
文本编辑器 样式失效 white-space: pre；
teng_liang的博客
06-26 1339
后台使用文本编辑器，编辑文案保存后，在前端页面展示的时候，样式失效，没有换行
white-space: pre;怎样保留自动换行
09-30
或者，如果能够接受合并连续空格（但保留换行和自动换行），那么使用`pre-wrap`是最佳选择。 另外，引用[3]中提到，使用`v-html`来渲染内容时，`white-space: pre-wrap`才生效。这提示我们，有时候样式能否生效还...
vue3 schemas api属性 label 内容'<div>诉讼受理法院<br/>公证处/仲裁机构</div> 换行无效
10-22
首先，用户的问题是关于Vue 3的schemas API属性label内容换行无效的问题。具体是：在label内容中使用了HTML字符串'诉讼受理法院 公证处/仲裁机构</div>'，但换行无效。 用户提到了引用[1]和引用[2]，这些是站内...
uniapp代码如下，为什么文本已经超过了200px，scroll-view不能滚动？ <scroll-view class="md-content" style="height: 200px;"> <text :selectable="true" :user-select="true"> {{nodesCalcBook}} </text> </scroll-view> .md-content { text-align: justify; line-height: 1.5; word-wrap: break-word; padding: 8px 8px; display: flex; flex-direction: column; flex: 1; white-space: pre-wrap; -webkit-overflow-scrolling: touch; // 使滚动更流畅 width: 100%; //用来app端长按复制的 -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
07-17
另外，还有一种可能是`white-space: pre-wrap`导致文本换行，从而高度增加，但可能由于父容器高度没有被正确计算，所以可以尝试给`scroll-view`设置`overflow-y: auto`（在H5端）或在小程序端确保`scroll-y`属性...
el-textarea输入标点符号导致换行
最新发布
10-23
1. 使用`white-space: pre-wrap;`：保留空白符序列，但是正常地进行换行。这对于中文换行有效。 2. 尝试使用`word-break: break-all;`：让文字在任意字符间断行，包括标点符号。但注意，这可能会导致英文单词被截断...
van-dialog的message内容换行和空格
08-15
- 换行：使用\n在字符串中，然后通过CSS设置white-space: pre-wrap;。 - 空格：使用多个空格，但同样需要CSS保留。 在Vant中，Dialog的样式可以通过自定义类名或全局样式覆盖。 总结回答： 1. 介绍问题：van-...
vue 标签内文本换行换行问题:“white-space: pre-wrap“
peer__的博客
07-01 1209
2.换行之后会带来另一个问题,第一行抬头渲染时会被加入一个空格,并且替换不了那个空格,我的解决方法是加上属性"text-index:-5px;"反向使用首行缩进,抵消掉开头的空格。1.vue标签内容带回车符,仍然不会换行显示,这时加上"white-space: pre-wrap"属性后就能显示换行符"\n"的效果了。
CSS 设置空格原样显示 white-space:pre-wrap；
northcastle的博客
04-15 3246
css 样式设置，保留 文本中的所有空格内容
前端接收后端返回换行符 /n 不生效（Vue）
m0_46390103的博客
09-27 1915
前端接收后端返回换行符 /n 不生效（Vue）
解决前端“\n”不换行问题
weixin_46953330的博客
03-13 1万+
解决前端"\n"不换行问题
vue中换行符不换行、不生效的处理(\n或者＜br＞)
热门推荐
编程界明世隐的博客
03-10 5万+
先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span>{{msg}}</span> </d
微信小程序设置文字样式white-space失效
h_未来可期_的博客
06-06 2333
微信小程序文本样式，分段展示
解决 HTML 中文本换行符不生效的问题
罐装旺仔的博客院子
02-24 1344
方法说明保留空白符和换行符，并在必要时换行。保留换行符，但合并多余的空格。替换为<br>标签将换行符替换为<br>标签，强制换行。使用<pre>标签完全保留文本格式（包括空格和换行符）。
vue中v-html识别\n换行
hnnd123的博客
05-06 1万+
如果需要合并空格可以使用： 附：white-space属性（来源于MDN） normal 连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。 nowrap 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。 pre 连续的空白符会被保留。在遇到换行符或者元素时才会换行。 pre-wrap 连续的空白符会被保留。在遇到换行符...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值