Assign column-count property based on content size (CSS issue) - css

Question

I have some paragraphs in my page. Some are very lengthy while some are very small. I have given common property of column-count : 2 for all the paragraph. But the problem is I don't want to split the paragraph into two if the content is just two or three lines only
Here is my code.
p{
column-count: 2;
}
<h2>First paragraph (needs to be two column)</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>
Here my first paragraph is lengthy and I want that to be shown as two columns.
But my second paragraph is too small and I don't want that to be in two columns.
Here is a Demo of minimal working code.
Note: I can't predict which paragraph will be lengthy, which one will be small. It's coming from the server.
Edit: Since I'm having more than 100 paragraphs in my actual code, I prefer to resolve this using CSS only (If possible)

Answer 1

You have to do this with JavasScript. CSS cannot be conditionally enabled or disabled based on the word count of the content it's styling.
Of course, it doesn't have to be JS on the client. You could add the class short-paragraph on your server too.
JS
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
p {
column-count: 2;
}
p.short-paragraph {
column-count: 1;
}
Here's a working Fiddle.
Speed
Based on OP' reply, speed might be an issue. Here's a quick benchmark with 500 paragraphs (check the console). My old laptop makes it in 5ms, so it should not be an issue.

Answer 2

.odd {
column-count: 1;
}
.even {
column-count: 2;
}
<h2>First paragraph (needs to be two column)</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 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 class="odd">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>
Nice and simple, Create an odd and even class for your paragraphs and then style to your liking. Whichever Paragraphs you dont want to have two columns just assign them the odd class.