JSFiddle - React, Tailwind, and code Playground

by SiddAjmera

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h4>Overflow First</h4>

<p class="overflow-first">This is some very very very long word. This text will-break-at-hyphens.</p>

<h4>Overflow Second</h4>

<p class="overflow-second">This is some very very very long word. This text will-break-at-hyphens.</p>

</body>
</html>

CSS

p {
    max-width: 140px; 
    border: 1px solid #000000;
}

p.overflow-first {
  	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

p.overflow-second {
  	text-overflow: ellipsis;
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
}