NoWrap Ignored In Label

Nathan Sokalski 4,126

I have a CollectionView in which the ItemTemplate contains a Grid, which has 2 ColumnDefinition(s): Auto & *. The second column contains a Label with LineBreakMode="NoWrap". When the text is too long to fit, I want it to be clipped (not wrapped), even if this means some of the text becomes not visible. However, the text seems like it is wrapping. Here is a screenshot:

The XAML for the Label is as follows:

<Label Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Fill" LineBreakMode="NoWrap" FontSize="36" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="Black" BackgroundColor="{Binding PlayerIndex,Converter={StaticResource Places},ConverterParameter=Color}" FontFamily="Arial" Margin="0" Padding="5,0,0,0" Text="{Binding NameTotal}"/>

How can I cause the text to be clipped rather than wrapped? Isn't that what LineBreakMode="NoWrap" is supposed to do? Is this something I need to do in a Custom Renderer (in case it is of any significance here, I am using Android)? Thanks.

Nathan Sokalski 4,126 Reputation points

2020-12-25T16:26:10.647+00:00

In most cases, that is true. However, in my specific case, that would be inappropriate because it would be truncated in the middle of a number. Because of my scenario, in the rare case that the text will be clipped it will only be a small amount (often only a closing parenthesis or a closing parenthesis & half a digit), which means clipping would usually give the user enough to determine the value. Needing to click or take any other action would make displaying my text pointless, because it is intended to be a quick, temporarily displayed summary.
John Hardman 261 Reputation points

2020-12-28T15:55:57.743+00:00

As @JessieZhang-MSFT said, if you want to have the Text clipped, use HeadTruncation, MiddleTruncation or TailTruncation. If you don't want to lose any of the Text, but also don't want it to wrap, then either use a ScrollView to make the results horizontally scrollable (I'd suggest one ScrollView containing the results below the Current Winners title), or use an Effect or CustomRenderer to reduce the FontSize of any Text that does not fit in the available space (the ScrollView is the easier of these two options).

1 answer

JessieZhang-MSFT 7,706 Reputation points Microsoft Vendor

2020-12-23T07:49:18.343+00:00

Hello,

Welcome to our Microsoft Q&A platform!

How can I cause the text to be clipped rather than wrapped?

If you want the long text to be clipped , you can try the following value( HeadTruncation, MiddleTruncation , TailTruncation) for property LineBreakMode

Best Regards,

Jessie Zhang

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Nathan Sokalski 4,126 Reputation points

2020-12-23T17:11:16.863+00:00

Those do not clip the text, they add a …

JessieZhang-MSFT 7,706 Reputation points Microsoft Vendor

2020-12-25T08:20:36.207+00:00

When the text is long, an ellipsis lets others know that there are other characters to follow. I think it's easier to be understood by others. This is more in line with the customer experience.

Nathan Sokalski 4,126 Reputation points

2020-12-28T16:28:10.583+00:00

In most cases, I think that too. However, that does not apply to numbers or quick-reference areas. My scenario is displaying a popup list of player names with their current total beside them when the user presses/releases a button. If they want to see any clipped area (which will be rare but possible), they just release their finger, so displaying a ... is pointless. You may ask why I would be willing to show half a number, and the reason is because the clipping will be rare, so most of the time it will improve the appearance by using more of the screen real estate.

JessieZhang-MSFT 7,706 Reputation points Microsoft Vendor

2020-12-29T08:05:58.263+00:00

I did a test,when I set LineBreakMode="NoWrap" property for Label, a long string will well fit the screenshot.

If it is convenient for you, could you please post a basic demo to github or onedriver so that we can test on our side?
Sign in to comment

Share via

NoWrap Ignored In Label

1 answer