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

What steps should I take to fix this TypeScript error?

Retrieving online content and updating it upon reestablishing internet connection

Node.js is having trouble locating a module that has been installed

Linkify Method appearing in html.erb file displaying with HTML on the view

Unveiling the Mystery of Angular: Why are constructor parameters without access specifiers hidden from view outside the

Retrieving data from an external PHP script

Fire the click event following the parsing of the HTML page

Exploring Array Iteration in a subscribe and ngOnInit Function

JavaScript code that functions similarly to VLOOKUP, allowing you to map input values from one field to

Node Pagination and Filtering feature malfunctioning

Prevent the navigation bar text from being truncated

Tips for organizing JSON object data and displaying it appropriately on an HTML page

Issue updating Bootstrap in ASP.Net Core 2.1 with Angular Template

Issue with displaying error message and disabling button as Keyup event fails to trigger

Executing a function while adjusting a range slider

JavaScript Multiplicative Persistence Problem Resolved by Implementing Efficient Solution that Executes in a Timely

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

Implementing a toggleable light and dark mode feature in Bootstrap 4 with a simple checkbox

When <tr> is used as a link with the target="_blank" attribute

Linkyfy.js does not function correctly with each and not statements