locked
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

    Thursday, November 7, 2013 6:14 AM

Answers

  • 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/

    Friday, November 8, 2013 11:52 AM

All replies

  • 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.

    Thursday, November 7, 2013 5:36 PM
  • 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.
    Friday, November 8, 2013 7:32 AM
  • 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/

    Friday, November 8, 2013 11:52 AM