Jump to content

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


mos

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...'

 

    

 

Link to comment
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,

Link to comment
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?

Link to comment
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

Link to comment
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});

  

Link to comment
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,

Link to comment
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.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...