Adjust column-count property according to the size of the content (CSS dilemma)

Question

Adjust column-count property according to the size of the content (CSS dilemma)

I have a variety of paragraphs on my page, with some being lengthy and others very short. I have applied the common property of column-count: 2 to all paragraphs, but I am facing an issue where I do not want to split a paragraph into two columns if it consists of only two or three lines.

Below is the code snippet:

p {
    column-count: 2;
}

<h2>First paragraph (needs to be two columns)</h2>
<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>
<h2>Second one (no need of column)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>

In my content, the first paragraph is long and should be displayed in two columns. However, the second paragraph is short and should not be split into two columns.

Here is a Demo demonstrating a minimal working code example.

Please note that I am unable to predict in advance which paragraphs will be long or short as they are generated dynamically from the server.

Edit: Since my actual code contains over 100 paragraphs, I am looking for a CSS-only solution to address this issue (if possible).

css

Answer 1

Answer №1

To conditionally enable or disable CSS based on word count, JavaScript must be used as CSS cannot dynamically adjust based on content length.

While JavaScript can be applied on the client side, the short-paragraph class can also be added server-side.

JavaScript Solution

function letterCount(element) {
    return element.textContent.length;
}

function isShort(element) {
    return letterCount(element) < 200;
}

Array.prototype.slice
    .call(document.getElementsByTagName('p')).forEach(paragraph => {
        if (isShort(paragraph)) {
            paragraph.classList.add('short-paragraph')
        }
    });

CSS Styling

p {
    column-count: 2;
}

p.short-paragraph {
  column-count: 1;
}

Try the live demo.

Performance

Concerns about speed? A benchmark test with 500 paragraphs shows it to be efficient (5ms on an old laptop).

Answer 2

To conditionally enable or disable CSS based on word count, JavaScript must be used as CSS cannot dynamically adjust based on content length.

While JavaScript can be applied on the client side, the short-paragraph class can also be added server-side.

JavaScript Solution

function letterCount(element) {
    return element.textContent.length;
}

function isShort(element) {
    return letterCount(element) < 200;
}

Array.prototype.slice
    .call(document.getElementsByTagName('p')).forEach(paragraph => {
        if (isShort(paragraph)) {
            paragraph.classList.add('short-paragraph')
        }
    });

CSS Styling

p {
    column-count: 2;
}

p.short-paragraph {
  column-count: 1;
}

Try the live demo.

Performance

Concerns about speed? A benchmark test with 500 paragraphs shows it to be efficient (5ms on an old laptop).

Answer 3

Answer №2

.odd {
  column-count: 1;
}
.even {
  column-count: 2;
}

<h2>First paragraph (requires two columns)</h2>
<p class="even">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 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 popularized 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>
<h2>Second one (no need for columns)</h2>
<p class="odd">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>

A simple solution: Define odd and even classes for your paragraphs and then customize their styles as needed. Assign the odd class to any paragraphs that should not be displayed in two columns.

Answer 4

.odd {
  column-count: 1;
}
.even {
  column-count: 2;
}

<h2>First paragraph (requires two columns)</h2>
<p class="even">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 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 popularized 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>
<h2>Second one (no need for columns)</h2>
<p class="odd">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>

A simple solution: Define odd and even classes for your paragraphs and then customize their styles as needed. Assign the odd class to any paragraphs that should not be displayed in two columns.

Adjust column-count property according to the size of the content (CSS dilemma)

Answer №1

JavaScript Solution

CSS Styling

Performance

Answer №2

Similar questions

Slider Volume with jQuery

What is the best way to adjust a horizontal list of inline elements to stack vertically when the div container is resized?

I seem to be having trouble properly sizing the width of my forms in Mui React

Do you need to align images side by side and have clickable images positioned beneath each one?

Does anyone else have a peculiar problem with css width?

Is it possible to specifically focus on Google Chrome?

Is the use of !important included in Bootstrap 4?

Concealing Bootstrap 3 elements on a split-screen layout

Ways to apply distinct styles to various ids and common classes

Reducing the size of CSS classes and IDs

The EJS is causing a problem with linking the style sheet

Incorporate a class into a link within the wp_list_pages function

Adjust CSS classes as user scrolls using skrollr

Title Bar: Excessive gap; inaccurate navigation to nearby link

Ways to reset a JQuery/JavaScript filter

Unable to locate any division element by using document.getElementById

What is the best way to highlight titles that are unique but still prominent?

Adding a PDF generated from an HTML div to an email using Java

What are the steps for positioning material-ui icons to the right?

The animation-play-state is set to 'running', however, it refuses to start playing