JSFiddle - React, Tailwind, and code Playground

by momenelkamri

HTML

<div class="details" itemscope itemtype="http://data-vocabulary.org/Product">
     <h2>
        <a class="heading" href="/product/acmesw" title="Acme Super Widget">
            <span class="trunc" itemprop="name">Acme Super Widget 3000</span>
            <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">- <meta itemprop="currency" content="AUD" /><spanitemprop="price">$199.95</span></span>     
         </a>
     </h2>

</div>

CSS

.details {
    width:300px;
    border:1px solid red;
}
.trunc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width:60%;
}
h2 span {
    display:inline-block;
    vertical-align:top;
}
a {
     text-decoration:none;

}
a:hover {
    text-decoration:none;
    border-bottom: 1px solid red;
    color:red;
}