Переполнение текста в CSS - применить многоточие, если текст расширяет (n) -ю строку

Question

Я использую следующий код, чтобы предотвратить переполнение текста на новую строку:

.info-box{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; 
  height: 3em;
  width: 300px;
  font-size: 1em;
  line-height: 1em;
}

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

Мне, наверное, не надоест, если мне понадобится JS для этого.

Answer 1

Вы можете подделать его с помощью CSS следующим образом.

Добавьте <span>...</span> в начале div.

<div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div>

В вашем CSS

1. избавиться от nowrap и text-overflow

2. добавить немного padding-right

3. установите span внизу справа внизу.

CSS

.info-box{
    overflow:hidden;  
    height: 3em;
    width: 300px;
    font-size: 1em;
    line-height: 1em;
    padding-right:20px;
}

.info-box span{
    position:relative;
    top:31px;
    left:297px;
    display:inline-block;
}

Рабочий пример: http://jsfiddle.net/jasongennaro/UeCsk/

fyi ... в левом верхнем углу будет небольшой промежуток, где должен быть многоточие (потому что мы используем position:relative;.

fyi 2 ... это должно работать с любым количеством строк, которые вы хотите (вы упомянули три в вопросе), при условии, что вы настроили top и left.

Answer 2

Я знаю, что это старый вопрос, но я нашел это исправление, и оно прекрасно работает для меня.

https://codepen.io/martinwolf/pen/qlFdp

    @import "compass/css3";

/* Martin Wolf CodePen Standard */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

/* END Martin Wolf CodePen Standard */


$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}