Truncate Text with Ellipsis

I wonder how you can display an ellipsis (’…’) if there is not enough space to display the text.


You get this automatically on iOS and Android devices, but they wont appear in local preview.

Thanks, I did not know that. Now I have a new problem. There is no problem if I do this:

    <Text>A very long text</Text>
    <Text>A very long text</Text>

But the text doesn’t display an ellipsis if I do this:

<StackPanel Orientation="Horizontal">
    <Text>A very long text</Text>
    <Text>A very long text</Text>

How can I solve that? I need to put two texts one after the other on the same line.

I’ve also tried a two-column grid but it does not work :frowning:

What device are you testing on? This works as expected (with ellipsis) on an LG G2:

<App Theme="Basic">
        <Grid ColumnCount="2">
            <Text>A very loooooooooooooooooooooooooooooooooooooooooooooong text</Text>
            <Text>Yet another very loooooooooooooooooooooooooooooooooooooooooooooong text</Text>

Hi Juanlu

Stacking Texts in a horizontal stackpanel wont give you ellipsis because they wont restrain the width of your text-elements. Remis Grid-solution should however work. Could you show us the code you used with Grid?

Finally it works, I think I was doing something wrong, thank you both.