微信小程序 view的文本不能自动换行问题

今天碰到了个问题，view并不能让文本自动换行
看看官方定义的view组件，原本的view定义的display为block。
之前忘了在哪里看到小程序布局的时候用flex，所以涉及到了css3的display:flex。
具体学习，看阮一峰老师的教程

看这次出现的问题，是文字太长被吃掉了，截图：
依靠我多年的开发经验，试倒是被我试出来了，整理了一下思路，一般出现滚轴（在图片或者文字片段中）是因为width，display，（height，padding，margin），对于文字片段（这里只针对中文）实在不行就只能强制换行，例如flex-wrap:warp，white-space:pre-wrap。

然后考虑了以下几种方法

首先，width是100%，如果涉及到padding就要注意width和padding-left以及padding-right的加减问题
其次是height，一般除非固定了大小，不然我不会设置height，而是让内容填充起来高度之后，给它加上适当的padding-top和padding-bottom
另外是margin，这里并没有用到就不说了
方法一：放任不管，让view保持原本的display为block（出现滚轴）
如果不去设置view的display，则会出现如图的情况：
没错又是滚轴，这次不是因为图片（图片出现滚轴的问题请参考这篇文章 scroll-view中，image组件出现滚轴）

方法二：view { display:block }，再采取强制换行white-space: pre-wrap;（其实是可以的，看个人的编程习惯）
（强制换行的链接看这个：css强制换行和超出隐藏实现）
结果成这样了
当时的表情简直就是哪来的这么大的空隙！！调line-height肯定不对，但是pre-wrap里面又没找到padding或者margin之类的东西。

会不会是display的问题，于是有了方法三。

方法三：view { display:flex }，再加上css3的flex-wrap:wrap;flex-direction:row;（不起作用）
第一步，先将view的display转为flex；
第二步，设置view的flex-wrap:wrap;
中规中矩的写完，然鹅没有什么用。。

会不会是因为还要flex-direction:row;？然鹅加上去还是没用

后来找到资料（虽然和这个有点相似但是不一样的问题，资料是这个：微信小程序 scroll-view flex-wrap 失效问题），有人在评论中提到在scroll-view中，display:flex是没有用的，所以就排除display的问题了。
既然display没问题，就有了方法四。

方法四：view { display:block }，再采取强制换行white-space: pre-line;（看个人的编程习惯）
首先得解释，什么是pre-line，参考文档：white-space
对比一下方法二的white-space:pre-wrap和方法四的white-space:pre-line

white-space取值   描述   图片   new lines
（新的一行）   Spaces and tabs
（空格和tab）   Text wrapping
（文字环绕）
normal   Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.       Collapse
（奔溃，也就是没有新的一行）   Collapse
（奔溃，也就是没有空格和tab）   Wrap
（环绕）
pre-wrap   Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
（保留空白，像<br>标签一样换行，去填充盒子）       Preserve
（保存，也就是会有新的一行）   Preserve
（保存，也就是会有空格和tab）   Wrap
（环绕）
pre-line   Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
（不保留空白，像<br>标签一样换行，去填充盒子）       Preserve
（保存，也就是会有新的一行）   Collapse
（奔溃，也就是没有空格和tab）   Wrap
（环绕）
对比方法二和方法四，说是编程习惯的问题，如图

标签和文字之间换行：

标签和文字之间不换行：

所以方法二使用pre-wrap之所以会出现那么大的一片空白，就是因为它保留空白和tab。但是方法四pre-line就会去除空白和tab。

对于个人的编程习惯，因为文字不确定多少的问题，我是标签中间加文字，同时会换行，所以我这里使用的是方法四的white-space:pre-line;

接下来为了美观，就是调一下line-height和padding的问题了。最后效果：

结论就是，scroll-view中，设置display:flex是没不起作用的

中文文字片段在view中不能换行的问题，要使用强制换行，至于是使用white-space:pre-line（不会保留空白和tabs），还是white-space:pre-wrap（会保留空白和tabs），就要看个人的编程习惯了

有 0 个人打赏
————————————————
版权声明：本文为CSDN博主「电鳗效应」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_2842405070/article/details/69415164

微信小程序 view的文本不能自动换行问题相关推荐

微信小程序 view的文本自动换行了的问题（scroll-view）/微信小程序 view换行跟不换行的解决方案
今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信小程序页面传值文本解密问题
微信小程序页面传值文本解密问题遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解 ...
微信html字体颜色代码,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序自学笔记-----文本和字体样式设置
微信小程序自学笔记-----文本和字体样式设置用于自己自学微信小程序知识点总结,新手小白一枚,请大佬勿喷知识要点 · 各种字体样式属性命名及含义 · 利用style和class设置字体样式的方法 ...
微信小程序view标签hover-class属性和text标签selectable和decode属性
微信小程序view标签hover-class属性和text标签selectable和decode属性 <view hover-class="hc">按下样式</v ...
小程序（二十六）微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的). 两种方法,各有各的优缺点. 一:使用小程序内置标签rich-text 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑 ...

微信小程序 view的文本不能自动换行问题

微信小程序 view的文本不能自动换行问题相关推荐

最新文章

热门文章