• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 为什么微信小程序view文本会显示空格?如何解决显示空格的问题?

为什么微信小程序view文本会显示空格?如何解决显示空格的问题?

时间:2023-07-01 14:05 阅读数:142 人阅读 分类:知识百科

    你有没有想过这么火的微信小程序开发是什么样的?小程序的开发包括微信小程序编程,小程序编程工作是一件特别烧脑的事,在编程当中会遇到很多问题,但必须要解决才能进行下一个项目,今天小编要说的是微信小程序view文本会显示空格的问题,那为什么微信小程序view文本会显示空格?如何解决显示空格的问题?

  在小程序编程时如果出现了微信小程序view文本会显示空格的问题,这是因为微信小程序 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,则会出现如图的情况:

  


  没错又是滚轴,这次不是因为图片

  方法二: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

  

  对比方法二和方法四,说是编程习惯的问题,如图

  


  标签和文字之间换行:

  


  标签和文字之间不换行:

  


  所以方法二使用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),就要看个人的编程习惯

  以上为什么微信小程序view文本会显示空格?如何解决显示空格的问题?就讲到这里,希望给正在遇到微信小程序view文本会显示空格的问题的大家一些帮助,更多更精彩的微信小程序资讯,请持续关注微小乔,更多精彩干货等着你。

  更多精彩阅读:

  如何使用微信小程序text空格

  微信小程序空格代码,小程序实用代码大全

  微信小程序空格代码有什么作用?