JSFiddle - React, Tailwind, and code Playground

by st3fan

HTML

<h2>Toggle text to only one row</h2>

<div class="text-toggle collapse">
    <p>Dictumst mid porta, dolor penatibus, pellentesque massa, a, facilisis non quis mid mus dignissim cursus dolor? Augue arcu ac sit. Eu tempor scelerisque, scelerisque, nec lundium. Augue porttitor velit magna, augue pellentesque non lectus. Turpis enim, elementum porta mattis. Phasellus, mid, nisi in odio? Proin augue non rhoncus aenean etiam scelerisque.</p>

    <p>Scelerisque, pulvinar facilisis augue lectus tempor, vel sed lacus phasellus. Dis scelerisque mid tincidunt natoque, dolor. Risus pellentesque dapibus! Sociis porta tincidunt rhoncus? Turpis, enim rhoncus vut sagittis aenean, sociis lacus tortor? Porttitor turpis turpis.</p>
</div>

<div class="text-toggle collapse">
    <p>Scelerisque, pulvinar facilisis augue lectus tempor, vel sed lacus phasellus. Dis scelerisque mid tincidunt natoque, dolor. Risus pellentesque dapibus! Sociis porta tincidunt rhoncus? Turpis, enim rhoncus vut sagittis aenean, sociis lacus tortor? Porttitor turpis turpis.</p>
</div>

CSS

.text-toggle {
    border: 1px dashed #ddd;
    margin: 1em 0;
    padding: 1em;
    cursor: pointer;
}
.text-toggle.collapse {
    white-space: nowrap;
    overflow: hidden;
}
.text-toggle.collapse * {
    display: inline;
}

JavaScript

$('.text-toggle').click(function() {
    $(this).toggleClass('collapse');
});