Truncate Text with Ellipsis

How-to Discussions
1

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

2

Hi!

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

3

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

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

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

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

4

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

5

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

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

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?

7

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