您当前的位置: 首页 > 知识百科 > 小程序文字超出换行怎么实现?

小程序文字超出换行怎么实现?

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

  小程序文字超出换行怎么实现?有微信小程序管理表示,自己的微信小程序文本不能自动换行问题,那是因为你没有设置好哦,小编接下来会为大家介绍小程序文字超出换行怎么实现的方法哦。

  小程序文字超出换行怎么实现?

  首先,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-wrap之所以会出现那么大的一片空白,就是因为它保留空白和tab。但是方法四pre-line就会去除空白和tab。

  小程序文字超出换行怎么实现?小编为大家整理了四个办法哦,以上的四个办法都可以帮你实现小程序文字超出换行的功能,各位微信小程序开发者可以去试试看。大家请多关注微小乔。感谢大家的关注。

  

  微信小程序tab栏文字颜色修改怎么弄

  微信小程序标题颜色怎么修改?

  微信小程序轮播之文字轮播