Display a part of the text when it is too long

How-to Discussions
1

Hi,
Do someone have a solution to hide a part of a text when it is too long, like “I have a long text to display” displayong “Ihave a long text…”?

2

You get this automatically on iOS and Android devices, but they won’t appear in the local preview.

3

When TextWrapping is set to “Wrap” it doesn’t.

Screenshot_20190613-115030
Screenshot_20190613-115030.png1440×2560 157 KB

4

I don’t understand; the paragraph “Ceci est le hashtag…” is wrapping, so its working.

Your white panel however, looks like its got a fixed height.

5

I want the white panel to be height fixed, but text wrapping and completed by “…” if too long.

6

Ok, try playing with the MaxLength="100" on the text: https://fuseopen.com/docs/fuse/controls/text.html#maxlength-int-ux

7

Here ya go…

<App>
	<JavaScript>
		
		var Observable = require("FuseJS/Observable");

		var dataIn = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices ultrices imperdiet. Nam porta at tellus sed dictum. Nullam dui ipsum, laoreet id blandit ut, tempor eu nulla. Aliquam ullamcorper sem ut arcu egestas accumsan. In quam nisl, fringilla ut luctus id, rhoncus sit amet nibh. Maecenas malesuada ex ultricies, pretium nunc in, eleifend urna. In efficitur non augue vel iaculis.';

		var paragraph = Observable('');
		
		function ellipsis(textIn, maxchars) {
			if (textIn.length > maxchars) {
				return textIn.substr(0, maxchars) + '...';
			} else {
				return textIn;
			}	
		}
		
		paragraph.value = ellipsis(dataIn, 200);
		
		module.exports = {
			paragraph
		};
	</JavaScript>
	<Panel Alignment="Center" Color="#ccc" Width="200" Height="200" Padding="10">
		<Text TextWrapping="Wrap" Alignment="Center" Value="{paragraph}" />
	</Panel>
</App>
1 Like
8

This works fine.Thanks