locked
ListView Item Template - Styling a Set of Items in a Column-Based Flexbox to Overflow Using Ellipsis

    Question

  • Hello, I have a listview that is using an item template with a div that is styled to display as a column-based flexbox. 

    For instance:

    <div class="subTitleWrapper">

    <h5 class="subTitleLabel">Label</h5>

    <h5 class="subTitleItem">Item</h5>

    <h5 class="subTitleLabel">Label 2</h5>

    <h5 class="subTitleItem">Item 2</h5>

    </div>

    I have several of these items on the same line, which eventually does overflow. I set the overflow: hidden property on the parent div and the children. I have also tried to set the win-type-ellipsis classes on these items (and the ellipsis text-overflow property). What I am finding is that I can successfully clip the text by hiding the overflow, but that I cannot get it to show the ellipsis character.

    I only want the last item to show the ellipsis, as if the list of h5 items were really all part of one container. Is there a simple way to do this? I know that setting max-width on an item that will likely be long works, but that seems very hacky and isn't adaptive/responsive to screen size.


    • Edited by jennallen Saturday, December 22, 2012 7:28 AM
    Saturday, December 22, 2012 7:28 AM

Answers

  • Hi,

    You could override the corresponding style in ui-dark.css or ui-light.css .

    You can find that in Reference->windows library for javascript 1.0->css .


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, December 28, 2012 7:40 AM
    Monday, December 24, 2012 7:50 AM