Как сделать текст усеченным, сохраняя его отзывчивым

Question

Я не могу понять, как сделать текст усеченным. примеры, которые я видел продемонстрировать что-то вроде этого

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

Как вы можете видеть, есть ширина набора для текста. Я бы хотел сделать это без явной установки ширины и использования колонок начальной загрузки.

Я нашел один пример, где текст усечен реагирующим образом, но он использует таблицы, которые я не хочу использовать. Есть ли способ сделать это без таблиц?

Вот соответствующий код.

<div class="row"> 
<div class="col-xs-2 vcenter"> 
    <img class="valign" src="http://s13.postimg.org/ih41k9tqr/img1.jpg" 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> 

Я создал ограниченную демо здесь: https://jsfiddle.net/zmfxcan5/

Я хочу, чтобы укоротить текст Lorem Ipsum после одной линии. Если окно уменьшено в размере, я хочу, чтобы текст обрезался после меньшего количества символов.

Answer 1

Я нашел ответ на эту проблему. Вам просто нужно реализовать класс со следующим css.

.truncate{ 
display:block; 
white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis 
}