Jump to content
uniGUI Discussion Forums
mos

Adding Ellipses (...) to TUniLabel.Text If Insufficient Space

Recommended Posts

I need to be able to add trailing dots to a TUniLabel.Text if it doesn't have sufficient space to display the full label before it is clipped.

 

e.g. If I have  label text = '12345678901234567890' and label can only show ten characters than the label text should appear as '1234567...'

 

    

 

Share this post


Link to post
Share on other sites

Hi,

 

One of the possible solutions:

 

1. UniLabel -> AutoSize = False

 

2. UniLabel -> ClientEvents -> UniEvents -> function beforeInit:

function beforeInit(sender, config)
{
    config.cls="ellipsisText";
 }

3. UniServerModule -> CustomCSS:

.ellipsisText {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Best regards,

Share this post


Link to post
Share on other sites

Hi Delphi Developer,

 

  Thanks for the code.

 

  However I need to be able to ellipsis a label that actually wraps over multiple lines.

 

  e.g.

 

      This is a test line1

       And this is test line...

 

  Do you know of a way that I can do this?

Share this post


Link to post
Share on other sites

Just bumping this to see if anyone ideas or has used any third party CSS/Javascript to handle this that they would recommend.

Share this post


Link to post
Share on other sites

Hi,

 

For Webkit browsers you can use this approach:

 

1. ... CustomCSS:

._ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: auto !important;
}

2. UniLabel -> ClientEvents -> UniEvents -> function beforeInit:

function beforeInit(sender, config)
{
    config.cls='_ellipsis';
}

3. UniLabel -> AutoSize -> False

Share this post


Link to post
Share on other sites

Hi Delphi Developer,

 

  I found some third party JQuery code that I was trying to use at this site: https://www.jqueryscript.net/text/jQuery-Plugin-For-Responsive-Multi-Line-Text-Truncating-fewlines.html

 

  I have added the file fewlines.js to UniServerModule.CustomFiles.

 

  Question I have is if I want to apply this code to a TUniLabel where do I make call to fewlines and what should 'p' be ie. how do I pass the reference to TUniLabel?

 

     $('p').fewlines({lines : 4});

  

Share this post


Link to post
Share on other sites

Hi,

 

Can you try this approach ?!:

 

1. UniLabel -> AutoSize -> False (with custom width)

 

2. UniLabel -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    var me=sender;
    $($('#'+me.id)[0]).fewlines({lines:2});
}

Best regards,

Share this post


Link to post
Share on other sites

In which folder did you copy the fewlines.js ?

 

For example:

 

1. You copied the file to the directory files

 

2. ... CustomFiles -> files/fewlines.js

Share this post


Link to post
Share on other sites

Hi Delphi Developer,

 

  Another question how can I actually call the FewLines.js code when the OnAjaxEvent is trigged for the label.

 

  ie. When I drag from a TUniTreeNode to the label the OnAjaxEvent triggers for the drag drop and I change the label text.

  When the label text changes I want to call the FewLines.js so it can ellipsis the label text if required.

Share this post


Link to post
Share on other sites

Hi,

 

Can you try this?!:

...
UniLabel1.JSInterface.JSCode('Ext.defer(function(){$($("#"+'#1'.id)[0]).fewlines({lines:2})},50);');
...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×