How to make text truncate while keeping it responsive

I can't figure out how to make text truncate responsively. The examples I've seen demonstrate something like this

.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
{

As you can see, there is a set width for the text. I'd like to do it without explicitly setting the width and while using bootstrap columns.

I've found one example where the text is truncated in a responsive way, but it utilizes tables, which I don't want to use. Is there some way to do this without tables?

Here is the relevant code.

<div class="row">
<div class="col-xs-2 vcenter">
    <img class="valign" src="http://ift.tt/2la2ECg" alt="">
</div><!-- This comment between lines 40 and 41 MUST be here for the vcenter class to work as intended.
--><div class="col-xs-10 vcenter">
    <div class="row">
        <div class="col-xs-7 col-lg-8">
            <span class="name">Thomas Bangalter</span>
        </div>
        <div class="col-xs-5 col-lg-4">
            <span class="time">2:09 PM</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-overflow">
            <span class="preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div>
    </div>
</div>

I've created a limited demo here: http://ift.tt/2kFfueW

I want to truncate the lorem ipsum text after a single line. If the window is reduced in size, I want the text to truncate after fewer characters.