Переполнение текста «...» в статье резюме

Question

Как мне получить элемент блока с текстом внутри него фиксированной высоты с «...» в конце для отзывчивого веб-сайта?

По сути, текстовое переполнение как свойство CSS не получает результат, который мне нужен, потому что «...» необходимо добавить в конце, если есть переполнение текста. Если нет переполнения текста, тогда должно быть «...». Поэтому, если текст обрезается, «...» отображается в последней строке в конце предложения.

<article> 
    <h1>Title</h1> 
    <p>Article description</p> 
    <p>Read more...</p> 
</article> 

Это основной макет. Фактический код размещен ниже. Он создает контейнер статей с изображением, заголовком, сводкой и «прочитайте больше».

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

  <article class="article-grey"> 
       <h4><a href="http://blog.rondevanlimburg.nl/2015/11/03/topcompetitie-vervolgstappen-2016/">Topcompetitie: Vervolgstappen 2016</a></h4> 

       <p>De evaluatie van de Topcompetitie 2015 was duidelijk in zijn eindrapportage… Geslaagd in zijn opzet, aanpak en uitvoering. En dát allemaal in een succesvol wielerjaar. De eerstvolgende stap is nu ... 

       </p><div class="thumbnail-container"><img src="http://blog.rondevanlimburg.nl/wp-content/themes/rondevanlimburg/img/logo_nieuws_gray.svg" alt="img"></div> 

       <span><a href="http://blog.rondevanlimburg.nl/2015/11/03/topcompetitie-vervolgstappen-2016/">Lees meer...</a></span> 
      </article> 

      #news article:nth-child(2) {/*First article different border*/ 
       border-top-left-radius: 0em !important; 
       border-top-right-radius:1em; 
      } 

      /*Article color*/ 
      .article-grey { 
       background:#efefef; 
       border-radius:1em; 
       margin-bottom:3em; 
       min-height:15em; 
       padding:1em 1em 1em 15em; 
       position:relative; 
       border-top-left-radius: 0em; 
       border-top-right-radius: 1em; 
      } 

Screenshot of what I want

Answer 1

Я не уверен, если вы можете установить «многоточие» (или аналогичное) в конце текста в поле с фиксированной высотой, но здесь является большим нетерпением решения для вашей проблемы ..

Создать новый элемент с (например):

position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 2rem; 
box-sizing: border-box; 
background-image: linear-gradient(rgba(255,255,255,.1),white 75%); 

и поместить его внутри элемента 'описание'. Кроме того, не забудьте установить позиция: относительная; для вашего элемента описания.

Вот рабочая скрипку .. надеюсь, что это поможет вам: https://jsfiddle.net/hmyqrmzs/

Скриншот Пример: