手机扫一扫访问本页内容

微信扫描点右上角"···"分享到好友或朋友圈

关闭
微信扫一扫可打开小程序

微信长按图片或搜“分享录”可打开小程序

关闭
小程序,经验 ,

关于微信小程序由于图片宽度太大或文字太长造成溢出屏幕的问题

问题是这样的,从数据库查出html字符串然后在微信小程序中用rich-text富文本组件解析从而达到跟网页显示html一样的效果,但是会因为有些图片宽度太大或者文字太长而造成溢出屏幕的问题,说白了就是显示超出了屏幕出现横向滚动条,这样看起来会臃肿查看内容也费劲,给人体验非常差劲!

这个问题卡了我很久,一开始不知道以为是图片宽度太大了,一直在各种瞎调图片,什么image加 “mode=”widthFix””,什么加class类或id或内嵌style设置“max-width: 100% !important;”、“width: 100% !important;”,无奈之下找各种插件来解析(包括网上用的比较多的jin-yufeng富文本组件mp-html),但是都没用!

但是奇怪的是,一年多前上线的版本竟然没有这个问题,后来经过各种比对发现也有一些不会出现内容溢出屏幕的情况,而出现这个问题的都有个共同特点,那就是用了代码块(用pre包code)而且内容很长!

再进一步调试发现将代码块部分隐藏掉(display:none;)竟然正常了!于是可以定位到问题就出在内容太长代买码块上!

经过反复调试发现问题就出在white-space上,只要设成“white-space:pre”就会有内容溢出屏幕问题!

在css中,white-space属性是用来处理元素内的空白,其属性值如下:

normal:忽略多余的空白,只保留一个空白(默认);
pre:保留空白(行为方式类似于html中的pre标签);
nowrap:只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。
pre-wrap:保留空白符序列,正常地进行换行;
pre-line:合并空白符序列,保留换行符;
inherit:从父元素继承white-space属性的值。

之所以要用pre这个属性值是因为它更准确体现代码块原始内容。

最后经过查阅资料才知道,在微信小程序中,如果对文本进行样式修改,标签必须是text不能用view,这算不算是缺陷呢?

总结,遇到内容溢出屏幕的情况,先排查清楚到底是图片还是文字造成的。如果是图片可以设置“max-width: 100% !important;”和“width: 100% !important;”或者直接设置成“width: auto !important;”,当然高度也要看有没有必要设置;如果是是文字造成的加个“white-space:pre-wrap”。

当然了,兼容问题往往是最耗时间最难解决的问题,需要投入大量时间和精力去研究和调试!

您的鼓励是我最大的创作动力:个人开发实属不易、有太多的辛酸,如果您觉得这篇文章对您有帮助并且您是苹果用户,麻烦您帮忙下载我的app并给个免费的好评,您还可以关注我的公众号、小程序等,谢谢,祝您一切顺心。

历史上的今天:

展开阅读全文


上一篇:

下一篇:

您还可以访问本站的小程序、公众号等所有端,或者下载APP, 在小程序、APP上可以评论文章以及保存图片还有在线客服哦,如您有任何疑问或建议可向作者提出意见反馈
关注我的公众号为您分享各类有用信息
扫码打开小程序可评论文章保存图片,在“我的”有实时在线客服哦,看效果?
分享录多端跨平台系统