JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h1>long Title long long long long long </h1>
        <p>text text text text text text text text text text text text</p>
        <p>text text text text text text text text text text text text</p>     
</div>

CSS

div {
    border: 1px solid #000;
    width: 240px;
    padding: 0 12px 10px;
    margin: 20px;   
}
h1 {
    background: #FFF;
    position: relative;
    margin-top: -12px;
    font-weight: bold;
    font-size: 16px;
    padding: 0 10px;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 226px;
}