how to show the user only 20 0r 30 characters...

how to show the user only 20 0r 30 characters...

hello All,

in the projects_List screen i have column name DISCRIPTION,so discriptions is very long text,i want to show only 20 or 30 characters of start....
how can i do it....
any help....

Israr Ahmad...
Replace the value of the expression by
If(Length(Discription) > 30, Substr(Discription,0 , 27) + "..." , Discription)

This will check if the length is over 30. If so, it will cut it down to 27 characters and add "..." to indicate it is not the entire value that is shown.
If the Discription is less than 30 characters long, it will be shown entirely.
thank u for the right help,
and i was trying to do by Format Text(),but it does not shows the "..."
The "..." is not necessary off course, but I like to add it so it is clear that the value has been cropped.
I also like to add a Popup_InfoBalloon to show the entire value to make it as user friendly as possible. :-)
yup ofcourse this "..." not necessary,but just for user information, and i used your condition if(length()) and its works perfect....
but i mean to say that can we do it by using Format Text builting function.....
any way thanx for the help....

This functionality is useful enough that I feel that every developer should make it an Action in a separate eSpace, so that they can use it in all of their projects. This is what I've done (as well as a few others, such as RegexCount) and it's a huge time saver.


I actually use it as a webblock so it is easier to use in tablerecords.

Hermínio Mira
Additionally, you can set an extended property "title", with the full description, so it shows a tooltip with the full description on mouse hover :)
Hi guys,

Another alternative would be to use the CSS text-overflow property, as it is now supported in all browsers. e.g.
.DivWithEllipsisText {
	border: 1px dashed #333;
	width: 250px;
	padding: 10px;

Tiago Simões

CSS textoverflow is good.
Tiago -

I avoided that approach, because many of my fields are 500 - 2000 characters (like the problem description for a workorder), and that's a LOT of data to be sending to the client that doesn't need to be sent, especially if I am just displaying the first 50 characters in a table that can have up to 50 rows per page... :( Truncating on the server is the way to do it for my needs.

Hi Tiago Simões,
I am new on Outsystems...

I am trying to use the example that you posted before about the ELLIPSIS, but I don't know why, it is not working in my project. What I want is that the text fits its size on the line according to the size of the screen for any device. For example, if I have a text field with the length of 50 caracters and the iphone on the horizontal position only fits 25, I want that the fields automatically show the text with 25 position + "...". For the vertical position shows the whole text.

How can I make this works?
Thanks a lot!


Check this example:

Tiago Simões
Hi Tiago,

I just used this example but it doesn't work. What is the element on my table that I should assign the style?

I am assigning the style to the expression. Is that correct?

Thanks again!
The CSS never worked for me... SilkUI has an action for TextEllipsis that does this. :)

Hello Justin, this action is interesting. What I'm trying to do is to show the text field in just one line, but only the text that fits on the screen (Ex.: when the device it is on the horizontal position it will show a longer text and what exceed will be cutted ("...") and on the vertical position will show a shorter text and the rest also will be cutted). All that needs to be automatically for any device.

Could you help on that?
Tiago -

Gotcha. I've tried various CSS techniques and none worked exactly right for me.

It's not hard to restrict it to one line:

white-space: nowrap; overflow: hidden;

That will HIDE what doesn't fit. But I never get it to show the "..." using CSS. :(

well all its better to understand the tag text-overflow: ellipsis;

text-overflow has couple of properties 
clip - ellipsis - initial

try this with the example below 

#sample1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; // you change the property here  clip, ellipsis or Initial //
    border: 1px solid #000000;