JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<label>Number of lines:</label>
<input id="lines" type="number" min="1" max="10" value="3" />
<input id="btn" type="button" value="Apply" />
<p id="para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>

CSS

#para {
    border: 1px solid gray;
    padding: 4px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

JavaScript

$("#btn").on("click", function() {
    var lines = $("#lines").val();
    $("#para").css({"-webkit-line-clamp": lines});
});