I'm looking to add an HTML element inside a paragraph every 200 pixels of height to create a break. Here's the paragraph:
<div class="newspaper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
.newspaper p {
column-count: 3;
}
Within the paragraph, I want to inject a span tag like this:
<div class="newspaper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</span>
Nam liber tempor cum soluta nobis eleifend option congue nihil i...</p>
</div>
This is what I have attempted:
var height = $('.newspaper').height();
console.log(height);
if (height > 200) {
$( ".newspaper p" ).append( "</p><span>TEST</span><p>" );
}
The issue is that "append" adds the html at the end. I am trying to make it loop every 200px of the paragraph height.