Text truncate in bootstrap

The css property text-overflow: ellipsis; works well for containers having width setting other than percentage, however since most responsive frameworks like Bootstrap set widths as a percentage value, it becomes somewhat more difficult to achieve this behavior.

A very nice alternative as suggested at http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/#codesyntax_2  is to add another div inside our container element with css properties display: table;  and table-layout: fixed;

.truncate-ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}
 
.truncate-ellipsis > * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="my-container">
<div class="truncate-ellipsis">
<span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo nibh. Sed cursus ante ut nunc molestie viverra.
    </span>
</div>
</div>