Custom Text-Overflow CSS

Custom text-overflow CSS?

Based on the Compatibility Table at the bottom of the MDN documentation, it seems only Firefox 9+ supports a string value for text-overflow.

So, you're mostly out of luck on that one.

text-overflow change content of ellipsis

You can set the value of text-overflow to a string, like:

.myclass ul li{
    text-overflow: '...';
}

However:

• It has horrible browser support(Only in Firefox and maybe edge)
• It's only specified in the editors draft for CSS, so it could very well be removed/changed.

In the draft, it even says:

Note: The <string> value, and the 2-value syntax "{1,2}" and functionality are all at risk.

Basically, don't use the string value.

Because of this, I'd just use a class if the overflow doesn't have to be dynamic, or JS if it does.

JS Solution

let p = document.querySelector(".js-overflow");

// Add overflow class if needed
if (p.scrollWidth > p.offsetWidth) p.classList.add("has-overflow");

while (p.scrollWidth > p.offsetWidth) {
  // Remove characters from paragraph until the text and the overflow indicator fit
  p.innerHTML = p.innerHTML.slice(0, -1);
}

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.has-overflow:after {
  content: "..."
}

<p class="js-overflow">
  Simple string to test text overflow, will overflow to your custom string at 200px.
</p>

text-overflow property custom style

You could use a attribute directive like bellow to do this. For more details please refer Angular DOC

Please Note: You could improve this directive as you wish. This directive is only giving you the basis to implement that feature.

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>

Working DEMO

Setting the amount of dots in text-overflow: ellipsis;

You're most likely out of luck @Bartosz, unless you only want to target Firefox users ;) Please see this answer on SO: https://stackoverflow.com/a/10349526/3681304

EDIT: There are no selectors for "overflown". As such there are no selectors for computed styles in CSS in general.

how to customize css ellipse for a text string

Try this:

var charAtBeginning = 10;

var charAtEnd = 7;

var myStr = "I have list of title in a drop-down as string example";

var finalOutput = "";

if (myStr.length > (charAtBeginning + charAtEnd)) {

  finalOutput = myStr.substring(0, charAtBeginning) + '..' + myStr.substring((myStr.length - charAtEnd), myStr.length);

}

alert(finalOutput);

text-overflow string invalid property value Chrome

Simply, it is not supported by Chrome.

See browser compatibility:
https://developer.mozilla.org/en/docs/Web/CSS/text-overflow

---

Related Topics