在段落中为省略号创建空间

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;
  }

此刻，“ ...”字样出现在段落中单词的下方（见照片）。我如何使最后一个字消失，以便在'...'处出现空白处

Answer 1

尝试text-overflow: ellipsis;与容器上overflow: hidden;。它应该自动添加省略号：https://www.w3schools.com/cssref/css3_pr_text-overflow.asp