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

Combining multiple API requests using NodeJS

Dealing with Sideways Overflow Using slideDown() and slideUp()

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

Tracking mouse movement: calculating mouse coordinates in relation to parent element

javascript utilizing underscorejs to categorize and aggregate information

Iterating through an array in Javascript to create a new array filled with objects

Please be patient for the PayPal script to load on the nextjs page

Sending data to API using AngularJS Http Post

Issue with a input element having relative positioning within a flexbox

What is the best way to interact with a html element using the onclick event in Selenium?

Tips for changing input field type from "password" to "text" in Angular?

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Tips for integrating highcharts plugins with highcharts-vue (highcharts vue wrapper)

Is there a way to calculate the number of days between two selected dates using the bootstrap date range picker?

Style HTML in VSCode just like you do in Visual Studio

Creating a rectangular pyramid using three.js r68: a step-by-step guide

What is the process for retrieving data on the server side using node.js that has been sent from the frontend via the post method

Tips for saving HTML code within a concealed field utilizing jQuery

Calculator screen filled with numbers overflowing beyond its boundaries

Ways to invoke a specific component within ReactDOM.render in React