<p class="slanted">Dynamically incentivize innovative ROI vis-a-vis interoperable opportunities. Uniquely morph exceptional action items after enabled manufactured products. Appropriately architect web-enabled products without high-payoff alignments. Credibly myocardinate cooperative interfaces before functionalized e-services. Continually drive multifunctional.</p>
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
body {
background-color: #3f3e3e;
}
p {
color: #ffffff;
font-family: 'Libre Baskerville', sans-serif;
font-size: 21px;
letter-spacing: .025em;
line-height: 32px;
overflow: hidden;
padding-bottom: 5px;
width: 550px;
}
.push {
background-color: #ff0000;
clear: left;
float: left;
// Same as the text's line-height:
height: 32px;
}
View Compiled
// String.repeat is only available in ECMA6, so most browsers don't have it.
if (!String.prototype.repeat) {
String.prototype.repeat = function(num) {
return new Array(num + 1).join(this);
}
}
$('.slanted').each(function() {
var slantedText = $(this);
slantedText
// Wrap inside the paragraph to keep it isolated from the "push" spans we're about to add
.wrapInner('<span class="slanted_inner"></span>')
// Add the extra spans required
.prepend('<span class="push"></span>'.repeat(20));
// Push the content over a little more each row
var push = $('.push', slantedText);
push.each(function(i) {
// include number is how wide each step is
var incline = 12;
// iterate through each "push" span, multiplying the position by the incline.
$(this).css('width', (++i * incline) + 'px');
});
// Set the height of the pullquote to be the height of its text.
// Pairing this with overflow: hidden in the CSS will keep any extra "push" spans from showing.
function setSlantedTextHeight(slantedText) {
var slantedTextInner = $('.slanted_inner', slantedText);
// Get the height of the inner text
var height = parseInt(slantedTextInner.height());
slantedText.css('height', height);
}
// Call height function
setSlantedTextHeight(slantedText);
});
This Pen doesn't use any external CSS resources.