代码之家  ›  专栏  ›  技术社区  ›  Penny Pang

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

  •  0
  • Penny Pang  · 技术社区  · 7 年前

    我正在使用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;
      }

    此时此刻,“…”出现在段落中单词的下方(见图)。我如何让最后一个词消失,这样就有了 为了“…” enter image description here

    1 回复  |  直到 7 年前
        1
  •  0
  •   Florea Ionut Micu    7 年前

    尝试 text-overflow: ellipsis; overflow: hidden; https://www.w3schools.com/cssref/css3_pr_text-overflow.asp