JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<p>Ellipsis generated manually from HTML</p>
<table class="my-table table table-bordered table-striped">
    <tbody>
        <tr>
            <td class="truncate-container"> <span class="truncate selected">
                    <span class="tip"></span>
 <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
 <span class="butt"></span>
</span> <span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>

            </td>
        </tr>
    </tbody>
</table>
<p>Ellipsis generated dynamically using jQuery</p>
<table class="my-table table table-bordered table-striped">
    <tbody>
        <tr>
            <td class="truncate-container"> <span class="truncate selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
 <span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>

            </td>
        </tr>
    </tbody>
</table>

CSS

p {
    font-weight:bold;
}
.my-table {
    width: 100%;
}
.truncate-container {
    border: none !important;
    max-width: 200px;
    white-space: nowrap;
}
.truncate-container .truncate {
    width: 48%;
    display: inline-block;
}
.selected span {
    display:block;
    float:left;
}
.selected .content {
    height: 28px;
    background: url("http://i.stack.imgur.com/DaQcG.png");
    color: blue;
    overflow:hidden;
}
.selected .tip, .selected .butt {
    height: 28px;
}
.selected .tip {
    background: url("http://i.stack.imgur.com/6m2HC.png") no-repeat;
    width:14px;
}
.selected .butt {
    background:url("http://i.stack.imgur.com/2WA5B.png") 100% no-repeat;
    width:8px;
}

JavaScript

$(".truncate.selected").each(function () {
    if ($(this).children("span").length > 0) return true;
    else $(this)
        .html('<span class="content">' + $(this).text() + '</span>')
        .prepend('<span class="tip" />')
        .append('<span class="butt" />');
});