1

I am using a WebView to align RTL text correctly.

Simply, I want to add "..." ellipsis when the text is lengthy.

Which is archived in a TextView using android:ellipsize="end"

Is there a way to achieve "..." ellipsis or to control the number of lines in a WebView?

Here is the code:

String header = "<html><head><meta http-equiv=\"Content-Type\" +" + "content=\"text/html; charset=UTF-8\" /></head>";
String dt = "<body dir=\"rtl\">" +  o.get(p).getTitle() +"</body></html>";
webView.loadData(URLEncoder.encode(header + dt,"utf-8").replaceAll("\\+"," "), "text/html", "UTF-8");
M.ES
  • 920
  • 14
  • 30
  • sure, what is the problem? THe steps seem trivial (find out if the text is too lenghty, add an ellipsis), so which step is not working out? how does your current code look? What does html/css have to with this? – Nanne Apr 27 '12 at 08:13
  • @Nanne Thanks for your reply, How can I found out if the text is lengthy and can not fit in the WebView? That's my problem :) – M.ES Apr 27 '12 at 08:15
  • And what is the textview doing? you added that somewhere just to contain the ellipsis? could you show some code? – Nanne Apr 27 '12 at 08:17
  • @Nanne Am not using a TextView, I want to achieve the "..." ellipse on a WebView, You can check the code above. – M.ES Apr 27 '12 at 08:23
  • Do you have control of the content of the text going into the webview? – Jack Apr 27 '12 at 08:26
  • @Jack I am getting the text from a Web service. – M.ES Apr 27 '12 at 08:28

2 Answers2

0

You have two simple options:

  1. Use CSS and the text-overflow property on your HTML element: directions here.

  2. If you need a bit better control where the ellipsis appears and have the means — include jQuery and a jQuery ellipsis plugin in your HTML via script tags: directions here.

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
petey
  • 16,914
  • 6
  • 65
  • 97
  • Thanks for your answer. However, the white-space: nowrap; CSS attribute makes the text wrap in a single line. How can I wrap the text in 90% of the WebView height? – M.ES Apr 27 '12 at 08:58
0

You could parse the html and find out which is the last visible html element on the page. You could then use the following by appending the #ellipsis id to that element.

CSS Text Wrapping: http://jsfiddle.net/6HcWM/

The problem will be finding the last visible html element as the screen size can vary, also the zoom level could presumably vary. I'm guessing that you'll need to append JavaScript to the html to discover this...

Maybe this would work: How to tell if a DOM element is visible in the current viewport?

Community
  • 1
  • 1
Jack
  • 15,614
  • 19
  • 67
  • 92
  • Thanks for your answer. However, the white-space: nowrap; CSS attribute makes the text wrap in a single line. How can I wrap the text in 90% of the WebView height? – M.ES Apr 27 '12 at 08:57
  • I'm not quite sure what you mean by "in 90% of the webview height" – Jack Apr 27 '12 at 09:23
  • I mean I don't want the text to be wrapped in a single line. I would prefer the ellipsis to be displayed at the end of the third line for example. – M.ES Apr 27 '12 at 09:31