Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

Question

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

I have a <div> that has a limited size, and I am looking for a way to display multiline text in it. If the text exceeds the available space, I would like to add "..." at the end along with a link to view the full content on another page.

Is there a way to achieve this using Javascript/CSS? I tried researching but couldn't find a clear solution.

It seems like there is a CSS property text-overflow: ellipsis;, but adding a link on the ellipsis might not be possible.

The answer provided here is close, but there are instances where only a part of the ellipsis appears if the text starts to overflow.

Library requirements: I am open to using jQuery (albeit reluctantly), but I would prefer a cross-browser solution that doesn't rely on any specific framework.

javascript html css

Answer 1

Answer №1

This example showcases a simple method to iterate through elements marked with the class .smart-overflow. It introduces a clickable a element with the class ellipsis-link only when the content is truncated. The attached link triggers an event listener that reveals the hidden content which was initially concealed using overflow: hidden. Please note that this solution is tailored for single-line text. For multiple lines and broader browser compatibility, refer to the alternative below.

var elements = document.querySelectorAll('.smart-overflow');
Array.prototype.forEach.call(elements, function (el) {
  var link = document.createElement('a');
  link.href = '#'; 
  link.className = 'ellipsis-link';
  
  if (el.offsetWidth < el.scrollWidth) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      el.classList.remove('smart-overflow');
    });
    el.appendChild(link);
  }
});

p {
  width: 200px;
  position: relative;
}
.smart-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.ellipsis-link {
  display: none;
}
.smart-overflow a.ellipsis-link {
  display: block;
  position: absolute;
  right: 0; 
  bottom: 0;
  width: 1.2em;
  height: 100%;
  cursor: pointer;
}

<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer string of text which should have an ellipsis. This is a longer string of text which should have an ellipsis.</p>
<p class="smart-overflow">Another string of text which should have an ellipsis. Another string of text which should have an ellipsis.</p>

In the scenario above, implementing text-overflow: ellipsis necessitates the usage of white-space: nowrap for it to operate effectively, restricting its functionality to a single line of text.

If you require multi-line support, consider employing the following methodology for modern browsers. If encountering any issues, explore the jQuery-based solution below for comprehensive browser backing.

var elements = document.querySelectorAll('.smart-overflow');
Array.prototype.forEach.call(elements, function (el) {
  var link = document.createElement('a');
  link.href = '#'; 
  link.className = 'ellipsis-link';

  link.addEventListener('click', function (e) {
    e.preventDefault();
    el.classList.remove('smart-overflow');
  });
  el.appendChild(link);
});

p {
  width: 200px;
  position: relative;
}
.smart-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  max-height: 2.2em;
  overflow: hidden;
  position: relative;
}
a.ellipsis-link {
  display: none;
}
.smart-overflow a.ellipsis-link {
  display: block;
  position: absolute;
  right: 0; 
  bottom: 0;
  width: 4.2em;
  height: 1.2em;
  cursor: pointer;
}

<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer multi-line string of text which should have an ellipsis. This is a longer string of text which should have an ellipsis.</p>
<p class="smart-overflow">Another multi-line string of text which should have an ellipsis. Another multi-line string of text which should have an ellipsis.</p>

JQuery provides a multi-line approach with comprehensive browser coverage utilizing this library.

$('.smart-overflow').dotdotdot({
  ellipsis: '',
  wrap: 'word',
  callback: function(isTruncated, content) {
    var self = this;

    if (isTruncated) {
      $(this).append($('<a/>', {
        class: 'ellipsis-link',
        text: '...',
        href: '#',
        click: function(e) {
          e.preventDefault();
          $(this).remove();
          $(self).removeClass('smart-overflow is-truncated').trigger("destroy");
        }
      }));
    }
  }
});

p { width: 200px; }
.smart-overflow { max-height: 2.8em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.min.js"></script>
<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer multi-line string of text which should have an ellipsis. This is a longer string of text which should have an ellipsis.</p>
<p class="smart-overflow">Another multi-line string of text which should have an ellipsis. Another multi-line string of text which should have an ellipsis.</p>

Answer 2

This example showcases a simple method to iterate through elements marked with the class .smart-overflow. It introduces a clickable a element with the class ellipsis-link only when the content is truncated. The attached link triggers an event listener that reveals the hidden content which was initially concealed using overflow: hidden. Please note that this solution is tailored for single-line text. For multiple lines and broader browser compatibility, refer to the alternative below.

var elements = document.querySelectorAll('.smart-overflow');
Array.prototype.forEach.call(elements, function (el) {
  var link = document.createElement('a');
  link.href = '#'; 
  link.className = 'ellipsis-link';
  
  if (el.offsetWidth < el.scrollWidth) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      el.classList.remove('smart-overflow');
    });
    el.appendChild(link);
  }
});

p {
  width: 200px;
  position: relative;
}
.smart-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.ellipsis-link {
  display: none;
}
.smart-overflow a.ellipsis-link {
  display: block;
  position: absolute;
  right: 0; 
  bottom: 0;
  width: 1.2em;
  height: 100%;
  cursor: pointer;
}

<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer string of text which should have an ellipsis. This is a longer string of text which should have an ellipsis.</p>
<p class="smart-overflow">Another string of text which should have an ellipsis. Another string of text which should have an ellipsis.</p>

In the scenario above, implementing text-overflow: ellipsis necessitates the usage of white-space: nowrap for it to operate effectively, restricting its functionality to a single line of text.

If you require multi-line support, consider employing the following methodology for modern browsers. If encountering any issues, explore the jQuery-based solution below for comprehensive browser backing.

var elements = document.querySelectorAll('.smart-overflow');
Array.prototype.forEach.call(elements, function (el) {
  var link = document.createElement('a');
  link.href = '#'; 
  link.className = 'ellipsis-link';

  link.addEventListener('click', function (e) {
    e.preventDefault();
    el.classList.remove('smart-overflow');
  });
  el.appendChild(link);
});

p {
  width: 200px;
  position: relative;
}
.smart-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  max-height: 2.2em;
  overflow: hidden;
  position: relative;
}
a.ellipsis-link {
  display: none;
}
.smart-overflow a.ellipsis-link {
  display: block;
  position: absolute;
  right: 0; 
  bottom: 0;
  width: 4.2em;
  height: 1.2em;
  cursor: pointer;
}

<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer multi-line string of text which should have an ellipsis. This is a longer string of text which should have an ellipsis.</p>
<p class="smart-overflow">Another multi-line string of text which should have an ellipsis. Another multi-line string of text which should have an ellipsis.</p>

JQuery provides a multi-line approach with comprehensive browser coverage utilizing this library.

$('.smart-overflow').dotdotdot({
  ellipsis: '',
  wrap: 'word',
  callback: function(isTruncated, content) {
    var self = this;

    if (isTruncated) {
      $(this).append($('<a/>', {
        class: 'ellipsis-link',
        text: '...',
        href: '#',
        click: function(e) {
          e.preventDefault();
          $(this).remove();
          $(self).removeClass('smart-overflow is-truncated').trigger("destroy");
        }
      }));
    }
  }
});

p { width: 200px; }
.smart-overflow { max-height: 2.8em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.min.js"></script>
<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer multi-line string of text which should have an ellipsis. This is a longer string of text which should have an ellipsis.</p>
<p class="smart-overflow">Another multi-line string of text which should have an ellipsis. Another multi-line string of text which should have an ellipsis.</p>

Answer 3

Answer №2

Looking for some amazing jQuery plugins to enhance your website? Take a look at these:

https://github.com/jjenzz/jquery.ellipsis https://github.com/rviscomi/trunk8

I once developed a piece of code that integrates trunk8 with ellipsis, creating responsive links in the process.

(function($, window, document, undefined) {

  'use strict';

  window.seeMore = function() {
    function addSeeMoreLinks() {
      $article.find('p').trunk8(options).each(function() {
        var $this = $(this);

        if (0 === $this.find('.trunk8').length) {
          $this.append(' <a href="#" class="seeMore">see more</a>.');
        }
      });
    }

    function removeSeeMoreLinks() {
      $article.find('p').each(function() {
        $(this).find('.seeMore').remove();
      });
    }

    function setupSeeMoreLinks() {
      addSeeMoreLinks();
      $(window).resize(function() {
        removeSeeMoreLinks();
        addSeeMoreLinks();
      });
    }

    var
      $article = $('.blogArticleList article'),
      options = {
        lines: 6,
        fill: '&hellip; <a href="#" class="trunk8">see more</a>.',
        tooltip: false
      };

    setupSeeMoreLinks();
  };

  if (window.addEventListener && $().trunk8) {
    window.seeMore();
  }

})(jQuery, window, document);

Answer 4

Looking for some amazing jQuery plugins to enhance your website? Take a look at these:

https://github.com/jjenzz/jquery.ellipsis https://github.com/rviscomi/trunk8

I once developed a piece of code that integrates trunk8 with ellipsis, creating responsive links in the process.

(function($, window, document, undefined) {

  'use strict';

  window.seeMore = function() {
    function addSeeMoreLinks() {
      $article.find('p').trunk8(options).each(function() {
        var $this = $(this);

        if (0 === $this.find('.trunk8').length) {
          $this.append(' <a href="#" class="seeMore">see more</a>.');
        }
      });
    }

    function removeSeeMoreLinks() {
      $article.find('p').each(function() {
        $(this).find('.seeMore').remove();
      });
    }

    function setupSeeMoreLinks() {
      addSeeMoreLinks();
      $(window).resize(function() {
        removeSeeMoreLinks();
        addSeeMoreLinks();
      });
    }

    var
      $article = $('.blogArticleList article'),
      options = {
        lines: 6,
        fill: '&hellip; <a href="#" class="trunk8">see more</a>.',
        tooltip: false
      };

    setupSeeMoreLinks();
  };

  if (window.addEventListener && $().trunk8) {
    window.seeMore();
  }

})(jQuery, window, document);

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

Answer №1

Answer №2

Similar questions

How to surround values and keys with double quotes using regular expressions in JavaScript

Acquire the text within an anchor tag using JavaScript

How can I best fill the HTML using React?

Is there a way to modify the video height so that it aligns with the dimensions of the

The mysterious plugin "transform-runtime" has been detected in the ".babelrc" file located in "UsersPhpstormProjectseasy-essay"

The CSS is not displaying correctly on Safari and Chrome browsers in Mac OS

Configuring Proxy Settings for WebpackDevServer

Dealing with a routing issue in node.js/express involving JavaScript and CSS

Difficulty with Pomodoro clock's canvas ring function not working as expected

When you hover over the image, the text will disappear

Tips for retrieving information from a highstock chart

Is there an issue with the functioning of Angular routing?

Stylish HTML table with personalized CSS styling

How do I disable the hover and click highlighting effect on a div in Vuetify using v-on in Vue2?

GSAP also brings scale transformations to life through its animation capabilities

Ways to improve the transition of a <video> background using CSS

JQuery enables nested sorting functionality

Is there a glitch in the Selenium Java CSS Selector functionality?

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Different Approaches for Handling User Interactions in Angular Instead of Using the Deferred (Anti-?)Pattern