How do you truncate characters by a certain length within a list item using jQuery

Question

I am having issues with text overlay and I don't want to use a horizontal scroll because some strings in my list could potentially be very long. So instead of using overflow: hidden, or overflow: scroll, or overflow: overlay I would just rather cut the character length add [...] and do a notification on the hover of the list item.

For Example:

<ul>
 <li>Black Coffee, Egyptian</li>
 <li>Green Tea</li>
 <li>Condensed Milk</li>
</ul>

Produces
- Black Coffee [...]
- Green Tea
- Condensed Milk

On Hover Produces A Boxed Overlay
Black Coffee, Egyptian (Organic, Boxed)

If you insist on using JavaScript, [I want to truncate a text or line with ellipsis using JavaScript](https://stackoverflow.com/q/4700226/215552) — Heretic Monkey, Dec 04 '19 at 19:05

score 1 · Accepted Answer · answered Dec 04 '19 at 19:10

This you can achieve using css, please find below code snippet:

div.a {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: clip; 
  border: 1px solid #000000;
}

div.b {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}

div.c {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: "----"; 
  border: 1px solid #000000;
}

<h2>text-overflow: clip (default):</h2>
<div class="a">Hello world!</div>

<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>

<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">Hello world!</div>

How do you truncate characters by a certain length within a list item using jQuery

1 Answers1