How can the text content within a tag be divided into multiple tags based on a specific maximum height for each tag?

Question

How can the text content within a tag be divided into multiple tags based on a specific maximum height for each tag?

If you have a block of HTML and you want to ensure that no single element exceeds a certain height, how would you go about splitting the element into multiple smaller elements? Keep in mind that the window width may affect this solution, so let's assume we are working with a narrow window where the element’s height is greater than the desired limit.

Begin With

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Finish With

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
<p>specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

javascript jquery html css

Answer 1

Answer №1

To tackle this issue using pagination, one approach is to simulate the pagination effect by adjusting the view of the element based on scroll offset.

Check out this link for an example: http://jsfiddle.net/Dr7Rv/

The code below essentially duplicates the original content as needed and shifts the view of each duplicate by scrolling. This allows you to manipulate and position separate elements according to your preferences. The code supports both pixel height and line count, with the latter typically providing a better visual appearance.

$.fn.createPagedClones = function(measure, type){
  /// set up variables
  var p = $(this), i = 0, c, t, h = p.innerHeight();
  /// handle conversion from lines to pixels
  ( type == 'lines' ) && ( measure *= parseFloat(p.css('line-height')) || 22 );
  /// create a reusable CSS object
  c = {"height": measure+"px", "overflow": "hidden"};
  /// iterate through divisions and create offset views
  do{
    /// clone the original and adjust the view by scrolling
    t = ( t ? p.clone().insertAfter(t) : p ).css(c).scrollTop(i);
    /// increment i
    i += measure;
    /// stop when completed
  }while( Math.round(i) < h );
}

$(function(){    
  //$('.target-p-tag').createPagedClones(50, 'px');
  $('.target-p-tag').createPagedClones(3, 'lines');
});

Theoretically, you could modify the code above so that it always operates on the original content, making the pagination system effectively scroll the content per page. However, this version grants you the flexibility to position each page individually. For instance, you could place them side by side, though this may appear odd if dealing with elements of varying sizes like images.

Answer 2

To tackle this issue using pagination, one approach is to simulate the pagination effect by adjusting the view of the element based on scroll offset.

Check out this link for an example: http://jsfiddle.net/Dr7Rv/

The code below essentially duplicates the original content as needed and shifts the view of each duplicate by scrolling. This allows you to manipulate and position separate elements according to your preferences. The code supports both pixel height and line count, with the latter typically providing a better visual appearance.

$.fn.createPagedClones = function(measure, type){
  /// set up variables
  var p = $(this), i = 0, c, t, h = p.innerHeight();
  /// handle conversion from lines to pixels
  ( type == 'lines' ) && ( measure *= parseFloat(p.css('line-height')) || 22 );
  /// create a reusable CSS object
  c = {"height": measure+"px", "overflow": "hidden"};
  /// iterate through divisions and create offset views
  do{
    /// clone the original and adjust the view by scrolling
    t = ( t ? p.clone().insertAfter(t) : p ).css(c).scrollTop(i);
    /// increment i
    i += measure;
    /// stop when completed
  }while( Math.round(i) < h );
}

$(function(){    
  //$('.target-p-tag').createPagedClones(50, 'px');
  $('.target-p-tag').createPagedClones(3, 'lines');
});

Theoretically, you could modify the code above so that it always operates on the original content, making the pagination system effectively scroll the content per page. However, this version grants you the flexibility to position each page individually. For instance, you could place them side by side, though this may appear odd if dealing with elements of varying sizes like images.

Answer 3

Answer №2

Just a rough draft to illustrate the idea:

Check it out here

If you plan on using HTML within, make sure to implement the correct logic for splitting chunks without breaking tags. Consider using domParser or an external library like DOMParser.

Answer 4

Just a rough draft to illustrate the idea:

Check it out here

If you plan on using HTML within, make sure to implement the correct logic for splitting chunks without breaking tags. Consider using domParser or an external library like DOMParser.

Answer 5

Answer №3

Perhaps this solution may not be the most optimal, but it appears to be effective:

let containerHeight = 100;

$("p").each(function() {
    let words = this.innerHTML.split(" "),
        $paragraph = $(this).empty();

    for (let i = 0; i < words.length; i++) {
        if ($paragraph.height() > containerHeight) {
            $paragraph = $paragraph.text(function(i, val) {
                return val.split(" ").slice(0, -2).join(" ");
            }).clone().empty().appendTo("div");
            i--;
        }
        $paragraph[0].innerHTML += words[i] + " ";
    }
});

In this code snippet, the div serves as a container for the <p> element.

DEMO: http://jsfiddle.net/RubCq/

Answer 6

Perhaps this solution may not be the most optimal, but it appears to be effective:

let containerHeight = 100;

$("p").each(function() {
    let words = this.innerHTML.split(" "),
        $paragraph = $(this).empty();

    for (let i = 0; i < words.length; i++) {
        if ($paragraph.height() > containerHeight) {
            $paragraph = $paragraph.text(function(i, val) {
                return val.split(" ").slice(0, -2).join(" ");
            }).clone().empty().appendTo("div");
            i--;
        }
        $paragraph[0].innerHTML += words[i] + " ";
    }
});

In this code snippet, the div serves as a container for the <p> element.

DEMO: http://jsfiddle.net/RubCq/

How can the text content within a tag be divided into multiple tags based on a specific maximum height for each tag?

Answer №1

Answer №2

Answer №3

Similar questions

Checking for the existence of a Vue.js component

Creating labels dynamically with jQuery and HTML, then retrieving their text values through jQuery

The issue with mocking collections using JSON files in Backbone is that it is not properly triggering the success callbacks in

Utilizing JavaScript to employ the indexOf function on arrays in MongoDB

What is the best way to modify the inline style width of a table td from pixels to percentage in order to make it

Transform PHP array into a properly structured array or object that can be easily used in JavaScript

The value of type 'X' cannot be assigned to type 'Y' or 'undefined'

How can you ensure that it selects a random number to retrieve items from an array?

Retrieving the XML data from an uploaded file using PHP

Tips for removing a section of HTML code within a PHP script

The background color of the Bootstrap 5 navbar remains static and does not transition when scrolling

Errors related to missing RxJS operators are occurring in the browser, but are not showing up in Visual Studio

How about trying out the magic of Bootstrap columns?

Is there a way to identify the duplicates within an array of numbers and also determine how many times each number is repeated?

aiming at another iframe using its unique identifier

Enhance your website with Bootstrap 5's responsive rounded corners feature

What is the best method to replace the `click` event of an element selected using jQuery?

The art of linking subscriptions

Using a promise inside an Angular custom filter

Switch from using a button element for user input to using a text input field when