CODEWITHSUNDEEP
jqueryhtml
amaze interactive
amaze interactive

Reputation: 35

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

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)

Upvotes: 0

Views: 130

Answers (1)

Sarvesh Mahajan
Sarvesh Mahajan

Reputation: 924

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>

Upvotes: 1

Related Questions