Reduce the text of the link

Question

Reduce the text of the link

Trying to simplify a task, but I'm struggling with the solution. What I want to achieve is shortening a link to 30 characters and adding ... at the end if it's longer. Also, I'd like to make it possible to see the full link on hover similar to Amazon.

https://i.sstatic.net/iIMZh.png

Here's my current function that isn't working as intended:

function shortenLink() {
    var string = $("div a").text();

    if (string.length > 30) {
        string.substring(0, 30);
        string.append('...')
    }
}

javascript jquery html css

Answer 1

Answer №1

Give this jquery code a try:

$("div a").each(function(i,v){
    $(v).attr('title',$(v).text());
    if($(v).text().length > 30){
        var str = $(v).text().substring(0,30) + "...";
        $(v).text(str);
    }
});

Answer 2

Give this jquery code a try:

$("div a").each(function(i,v){
    $(v).attr('title',$(v).text());
    if($(v).text().length > 30){
        var str = $(v).text().substring(0,30) + "...";
        $(v).text(str);
    }
});

Answer 3

Answer №2

Implementing text-overflow: ellipsis; will...

Be sure to also use -webkit-line-clamp: 3; based on your specified line requirements.

I trust this information is beneficial :)

As an illustration..

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 300px;
  margin: 20px auto;
  font-family:arial;
}
.demo {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="wrapper">
  <p class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

Answer 4

Implementing text-overflow: ellipsis; will...

Be sure to also use -webkit-line-clamp: 3; based on your specified line requirements.

I trust this information is beneficial :)

As an illustration..

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 300px;
  margin: 20px auto;
  font-family:arial;
}
.demo {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="wrapper">
  <p class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

Answer 5

Answer №3

When using the substring method, a new string is returned instead of modifying the original string. Therefore, you need to reassign the new string back to the element in your solution.

(You can achieve this by using $(elementQuery).text(newValue))

Here is a more straightforward approach:

function shortenString(string,maxLength=30){
  return string.length >= maxLength? string.slice(0,maxLength-3) + '...' : string
}

// You can retrieve the text from an element using the $(<EL>).text() function.
console.log(shortenString('ssssssssssssssssssssssssssssssssssssssssssssssss'))
console.log(shortenString('ss'))

Answer 6

When using the substring method, a new string is returned instead of modifying the original string. Therefore, you need to reassign the new string back to the element in your solution.

(You can achieve this by using $(elementQuery).text(newValue))

Here is a more straightforward approach:

function shortenString(string,maxLength=30){
  return string.length >= maxLength? string.slice(0,maxLength-3) + '...' : string
}

// You can retrieve the text from an element using the $(<EL>).text() function.
console.log(shortenString('ssssssssssssssssssssssssssssssssssssssssssssssss'))
console.log(shortenString('ss'))

Reduce the text of the link

Answer №1

Answer №2

Answer №3

Similar questions

How can I achieve the functionality of an image changing when clicked and going back to its original state upon release with the help of HTML

Take action once the Promise outside of the then block has been successfully completed

Error in HTML: The AgGrid component is missing the required 'col' attribute

No output is displayed in the absence of errors. The program is functioning correctly

Why isn't my JavaScript variable visible in the HTML code?

I'm having issues with my flipclock moving too quickly and skipping over certain numbers. Any suggestions on how to resolve this issue?

Personalized configurations from the environment in the config.json file

Navigate to a specific section of a webpage with automatic scrolling

Expanding Issue with Bootstrap Navigation

What is the best method for directing a search URL with an embedded query string?

Incorporate a new attribute into objects within a designated level of a tree structure in

CSS list items do not expand

Unable to make boxes responsive to size changes in CSS when layered over video background

Guiding you on exporting a Typescript class with parameters in Node.js

Issues with closures in JavaScript

Rendering a Nativescript component once the page has been fully loaded

Executing javascript href using Python in Selenium

Transferring an Applescript list to ExtendScript in Javascript as an array for use in InDesign

Utilize the key as the value for options within an object iteration in Vue.js

The Scottish flag isn't displaying on my website, but all other Emoji 5 symbols are working perfectly