InsanityOnABun
InsanityOnABun

Reputation: 6143

How to force a WebView to break long lines of text into multiple lines?

I'm currently getting HTML from a website (a forum), modifying it, and displaying it in a WebView. Sometimes however, there are strings that are so long and don't have any characters that the WebView deems allowing of a line break, so the WebView stretches horizontally and introduces horizontal scrolling. I hate horizontal scrolling, and I want to force the WebView to wrap those lines down to a new line regardless of whether the WebView likes the character it's wrapping ahead of or not.

Note: I do want the WebView to still expand and scroll vertically.

Upvotes: 9

Views: 2996

Answers (2)

prakash ubhadiya
prakash ubhadiya

Reputation: 1271

Use below style for break all type of words. reference link css-tricks.com

 style="overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; "

Demo

String html ="<html> <head><meta name=\"viewport\" content=\"width=device-width, user-scalable=0,initial-scale=1.0\"></head><body style=\"overflow-wrap: break-word; " +
                "word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; \">" +
                YourHtmlText +"</body></html>";

webView.loadDataWithBaseURL(null, html, "text/html", "utf-8",
                "about:blank");

Upvotes: 5

Sandeep P
Sandeep P

Reputation: 4411

Add this function to your webview

 myWebView.loadUrl("javascript:stopScrolling()");

Add this function in your index.html

function stopScrolling()
{
    document.ontouchmove = function(e){ e.preventDefault(); }
}

Upvotes: 0

Related Questions