JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div class="course_description" onclick="javascript:view_description(14)">This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. This course is designed to give you a complete overview of what the demo worx system does. </div>

CSS

.course_description {
    width: 200px !important;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 110px;
    margin-bottom: 10px;
    line-height: 1.2;
}

JavaScript

function view_description(id) {
  alert('Viewing Description of '+id);
}