Создание пространства для многоточия в абзаце

Question

Я использую стиль CSS для создания многострочного усечения с многоточием

Вот код

.multiline-ellipsis {
    /* hide text if it more than N lines  */
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative;
    /* use this value to count block height */
    line-height: 1.2em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 6.6em;
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: justify;
    /* place for '...' */
    padding: 2px;
  }
  .multiline-ellipsis:before {
    /* points in the end */
    content: '...';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    right: 0;
    bottom: 0;
  }
  .multiline-ellipsis:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 0;
    /* set width and height */
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    /* bg color = bg color under block */
    background: white;
  }

В настоящий момент появляется «...», но под словом из абзаца (см. Фото).Как сделать так, чтобы последнее слово исчезло так, чтобы для '...'

имелось BLANK SPACE

Answer 1

Попробуйте text-overflow: ellipsis; на контейнере с overflow: hidden;.Следует автоматически добавить многоточие: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp