Long text in List


i’m look for solution with long text in List …

… exist some functional solution, how is it on this screen ?



You can use either TextTruncation="Standard" or TextWrapping="Wrap"

Yes, i know about this paramater TextTruncation=“Standard” … but does not work. The text is always same with this parameter and without this parameter. :frowning:

Do you want to turn truncation on or off? To turn it off, do TextTruncation="None"

I get dynamic list of data from json source … and i need this:

Text is too long in List (my first screenshot):

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod”

And i need it automaticly make it shorter (to visible width … my second screenshot):

“Lorem ipsum dolor sit amet, consectetur …”

Can you provide the UX that creates the list? You might be creating a structure that prevents truncation from happening.

ok it is very simple … this is example with static JSON data source … but it is same with dynamic JSON source

<Page ux:Class="ListPage">
<Router ux:Dependency="router" />
var rows = [
        id: 0,
        name: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
        data1: "Lakebed, Utah",
        data2: 10
        id: 1,
        name: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris",
        data1: "Black Hills, South Dakota",
        data2: 20
        id: 2,
        name: "Duis aute irure dolor",
        data1: "Bergenhagen, Norway",
        data2: 8
        id: 3,
        name: "Excepteur sint occaecat cupidatat",
        data1: "Moriyama, Japan",
        data2: 12

function goToDetail(){
  // Open detail page
module.exports = {
	rows: rows,
    goToDetail: goToDetail
                <Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />
                <Each Items="{rows}">
                    <Separator />
                    <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToDetail}">
                        <Text Value="{name}" Margin="20" Color="White" TextTruncation="Standard" />
                <Separator />

This is the correct way to do truncated text. It is working when I export to a device (iPhone) but doesn’t appear to be working preview. Note, I’m not expecting ellipsis in preview, since I know that doesn’t work, but I was expecting it to at least be clipped. I’ll add an issue to get that fixed.