Personalized style for text overflow property

Question

Personalized style for text overflow property

The application is created using Angular. Within a component, we have a div containing some text:

<div>abcdefghijklmnop<div>

Depending on the screen size, the text should either be fully displayed or clipped. I discovered the property 'text-overflow', which clips the text as abcde.... However, the specific requirement is to clip the text differently,

<first 3 characters>...<last 3 characters>

This means it should appear like abc...nop. How can we achieve this? The browser being used is Chrome.

javascript html css angular typescript

Answer 1

Answer №1

If you want to achieve this, you can utilize an attribute directive similar to the example below. For a more in-depth explanation, please consult the Angular documentation

Keep in mind that you have the freedom to enhance and customize this directive according to your requirements. It serves as a foundation for implementing the desired functionality.

Directive:

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appClip]'
})
export class ClipDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    let text: string = this.el.nativeElement.innerHTML;

    if(text.length > 6) {
      const first3 = text.slice(0, 3);
      const last3 = text.slice(text.length - 3)

      this.el.nativeElement.innerHTML =  `${first3}...${last3}`;
    }
  }

}

HTML:

<div appClip="">abcdefghijklmnop</div>

See Working DEMO Here

Answer 2

If you want to achieve this, you can utilize an attribute directive similar to the example below. For a more in-depth explanation, please consult the Angular documentation

Keep in mind that you have the freedom to enhance and customize this directive according to your requirements. It serves as a foundation for implementing the desired functionality.

Directive:

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appClip]'
})
export class ClipDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    let text: string = this.el.nativeElement.innerHTML;

    if(text.length > 6) {
      const first3 = text.slice(0, 3);
      const last3 = text.slice(text.length - 3)

      this.el.nativeElement.innerHTML =  `${first3}...${last3}`;
    }
  }

}

HTML:

<div appClip="">abcdefghijklmnop</div>

See Working DEMO Here

Personalized style for text overflow property

Answer №1

Similar questions

Confirm the existence of a non-null value

Issue with continuous loader malfunction

Exploring the process of authentication and authorization at individual route levels within Angular 4 using Keycloak

JavaScript with dropdown menus

What is the best way to modify the state of a particular element in an array when using useState in React?

Preventing a JavaScript timer function from executing multiple times when triggered by an 'in viewport' function

The provided argument, which is of type 'RefObject<HTMLDivElement>', cannot be assigned to the parameter of type 'IDivPosition'

Utilize the 'document / redirect' API within an express controller function

Tips for displaying only a list of folders in elfinder, a jquery file management plugin

When clearInterval is used to stop a setInterval, it will not automatically restart if reset with setInterval

Refill ag-grid with fresh data

Securing uploaded documents and limiting access to approved individuals

What steps do I need to take to have Greasemonkey execute a function upon the completion of an AJAX call

Utilizing the Bootstrap grid system to dynamically adjust column width based on specific conditions

Using the Javascript jQuery post() or get() method to pass a JSON object within a closure function prior to

Utilizing the request body value within the .withMessage() function of the Express validator chain

Using Jinja2 to iterate through a dictionary while having the ability to choose which key-value pair to access

What is the process to discover, upload, and implement a custom font?

Using a PHP variable to trigger the jQuery .show() function

Encountering a problem with AngularJS - receiving the [ng:areq] error, for more information visit http://errors.angularjs.org/1.3.2/ng/areq