微信小程序中的换行

今天遇到了一个多段文字展示的效果，试了很多种方法设置样式等都实现不了，最后发现，在微信小程序中，不能使用view为文字做换行等操作
HTML中的换行可以直接使用
标签，但是微信小程序中没有br标签，在微信小程序中实现文字换行有两种形式：

在text标签中使用/n来换行，静态数据可以考虑，动态不考虑
使用css的white-space控制

white-space：pre-line； /*合并空白符序列，但是保留换行符。*/
white-space：pre； /*空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。*/
white-space：pre-wrap； /*保留空白符序列，但是正常地进行换行。*/

但是使用过程中发现，给该元素设置了样式以后仍然不生效，如下：

最后经过查阅资料才知道，在微信小程序中，如果对文本进行样式修改，标签必须是text不能用view，
最终实现效果如下

总结

在微信小程序中对文本进行操作必须用text标签，不可以使用view标签，虽然view标签在电脑上生效

微信小程序设置文字样式white-space失效相关推荐

[已解决]微信小程序 canvas 文字样式错乱问题
在微信小程序中使用canvas绘制海报的时候,发现有多种不同的样式文字时, 保存canvas内容为图片,出现各种文字样式错乱. ------------------------------------ ...
在uniapp/微信小程序设置scrollTop初始值
一.概述使用HTML5在浏览器设置scrollTop初始值初始值,由于可以通过dom树定位.操作元素,实现相对比较简单. 而在vue等框架中,由于对dom树的淡化,导致通过dom树设置scrollT ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
微信小程序设置swiper圆角在ios上失效解决
今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug.下面是两种解决方案:第一种:-webkit-backface-visibility ...
ready等方法微信小程序_微信小程序设置图片固定比例
小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序设置图片固定比例 . 12月28日消息,微信官方日前发布消息称,为了让微信小程序相关成员在无线端更方便地管理微信小程序,将开发小程 ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
家用电脑设置成小程序服务器,电脑微信小程序设置全屏的方法是什么
电脑微信小程序设置全屏的方法是什么方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便 ...

微信小程序设置文字样式white-space失效

微信小程序中的换行

总结

微信小程序设置文字样式white-space失效相关推荐

最新文章

热门文章