HarmonyOS Text解析展示带html标签的文本，为什么解析出来高度非常的高，想让它高度随自身内容高度

Text解析展示带html标签的文本，为什么解析出来高度非常的高，想让它高度随自身内容高度。

HarmonyOS

superinsect

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

若html中的富文本中带有注入#等特殊字符，建议使用带有两个空格的loadData函数，将baseUrl和historyUrl置为空。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#loaddata

参考示例如下：

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column({ space: 30 }) {
      Button('loadData with #')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html><body bgcolor=\"white\"><div><span style= \"color:#0909F7\" >测试测试测试测试测试</span></div></body></html>",
              "text/html",
              "UTF-8",
              " ",
              " "
            );
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
          }
        })

      Button('loadData without #')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html>" +
                "<body bgcolor=\"white\">" +
                "<div>" +
                "<span style=\"color: rgb(255,100,100);\">" +
                "测试测试测试测试测试测试" +
                "</span>" +
                "</div>" +
                "</body>" +
                "</html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
          }
        })
      // 组件创建时，加载xxxx
      Web({ src: 'xxx', controller: this.controller })
    }
    .width("100%").height("100%").justifyContent(FlexAlign.Center)
  }
}