0
点赞
收藏
分享

微信扫一扫

移动端表格自适应宽度,图片自适应宽度,微信小程序rich-text富文本


项目中遇到了,自适应宽度的问题。

图片自适应宽度在,这篇文章里已经介绍了。


今天,又遇到1个表格自适应宽度的问题。

 

问题过程:

PC端,富文本编辑用KindEditor,保存html内容到数据库。

Web端展示,看着没问题。

移动端,比如微信小程序里,屏幕宽度不够,表格或图片,只看到一半。

 

解决办法是,修改html中的img和table的width style等属性。

table-layout: fixed; width=100%

代码中的注释已经很详细了,用到了jsoup和1个小技巧。

package com.jiutianniao.common.web.kit;

import org.apache.commons.lang3.StringUtils;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class MobileKit {

	//图片自适应宽度,1个大图,在手机端也能够完全展示出来
	//javascript:void(0)
	public static String handleImageWidth(String content){
		if(StringUtils.isEmpty(content)){
			return content;
		}
		String contentAfterImg= content.replaceAll("<img ","<img style='max-width:100%;height:auto;'");
		//String contentAfterTable=contentAfterImg.replaceAll("<table ","<table style='table-layout: fixed; width=100%'");
		Document doc = Jsoup.parse(contentAfterImg);
		 
		Elements tables = doc.getElementsByTag("table");
		for (Element table : tables) {
		  String style = table.attr("style");
		 style=style.replaceAll("width","width2");
		  style+="table-layout: fixed; width=100%";
		  table.attr("style",style);
		}
		Elements tds = doc.getElementsByTag("td");
		for (Element td : tds) {
			 td.attr("width","");
		}
		String html= doc.body().html();
		return html;
	}
}

 

 

非自适应的表格

移动端表格自适应宽度,图片自适应宽度,微信小程序rich-text富文本_自适应

 

自适应的表格

移动端表格自适应宽度,图片自适应宽度,微信小程序rich-text富文本_html_02

 


举报

相关推荐

0 条评论