MultiLine text with ellipses in WinJS

Question

How to display multi lines text with ellipses? I used .win-type-ellipses class but it shows ellipses with one line only.

I want to show two lines and then ellipses if the text is long

Any suggestions?

Note: The text is within the listview item

Answer 1

This is a current limitation, one that originates, I believe, in the W3C spec for text overflow. That is, you can use word-wrap: break-word; for multiline but then win-type-ellipses is ignored. So to get the effect you'll need to do manual work to insert ellipses yourself. Sorry there isn't a better answer.

Answer 2

suppose I need to display three lines and then ellipses, how to detect that the text binded to the item has reached the end of third line instead of setting some characters limit to the text. is there any better approach so that I can display three lines with ellipses at the end.

Answer 3

two suggestions, 1st is a some form of javascript to reduce the size of the text until it fits. i.e something along the lines of:

function addEllipsis(ele) {
  var text = ele.textContent;
  while(ele.scrollHeight > ele.offsetHeight) {
    ele.textContent = text.slice(0,-1);
    text = ele.textContent;
    ele.textContent = text + "...";
  }
}

or there is some css jiggery pokery you can do that might be better explained here:

http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/