WebView - 打断长词

Question

我创建了一个从远程服务器加载数据和 returns HTML 数据的服务。我将此数据放入我的 WebView。一切正常但有一个问题：如果某个单词太长，WebView 会添加水平滚动。我用 break-work，word-wrap 添加 CSS 文件，但它没有帮助。

JSONObject jsonObject = new JSONObject(strResult);
String content = jsonObject.getString("postContent");
TextView postTitle = (TextView) view.findViewById(R.id.postTitle);
postTitle.setText(jsonObject.getString("postTitle"));
WebView postContent = (WebView) view.findViewById(R.id.postContent);
postContent.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
postContent.getSettings().setLoadWithOverviewMode(true);
postContent.getSettings().setUseWideViewPort(true);
postContent.getSettings().setBuiltInZoomControls(true);
postContent.getSettings().setJavaScriptEnabled(true);
postContent.loadDataWithBaseURL("file:///android_asset/", content, "text/html; charset=utf-8", "utf-8", null);

Answer 1

显然：

setLoadWithOverviewMode(true) 加载完全缩小的 WebView

setUseWideViewPort(true) 使 Webview 有一个正常的视口（比如一个普通的桌面浏览器），而当 false 时，webview 将有一个视口限制在它自己的尺寸（所以如果 webview 是 50px*50px 视口大小相同）

所以我建议您不要使用 setUseWideViewPort，以下代码适用于类似的任务并且效果很好：

final WebSettings webSettings = webView.getSettings();
                    webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
                    webSettings.setEnableSmoothTransition(true);
                    webView.setBackgroundColor(Color.parseColor("#00000000"));
                    String before = "<html><head><style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/w_yekan.ttf\")}body {font-family: MyFont;font-size: 14px;text-align: right;}</style></head><body><div style=\"direction:rtl !important;; text-align:right !important;\">";
                    String after = "</body></html>";
                    String myHtmlString = before + Utils.editString(DoaText) + after;
                    webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
                    webView.loadDataWithBaseURL(null, myHtmlString, "text/html", "UTF-8", null);

我希望这个答案对您来说是一个很好的解决方案。

Answer 2

我确实遇到了完全相似的问题，最后意识到我误用了 css 选项。只需将 word-break: break-all; word-break: break-word 添加到 body and/or headers 的 css 样式即可完成

<head>
<style type="text/css">
    body {text-align: center; word-break: break-all; word-break: break-word}
    h1 {font-size:large; word-break: break-all; word-break: break-word}
    h2 {font-size:medium; word-break: break-all; word-break: break-word}
</style> </head>

可以找到 css 属性的更多详细信息 here or there

请注意，word-break 选项可能会严重影响 WebView 中文本的可读性。只在真正需要的时候使用它。

WebView - 打断长词

WebView - break long words

html

css

android

android-layout

android-webview