Css实现单行文本、多行文本、截断

我就是我 2022-04-18 01:41 577阅读 1赞

一、单行文本截断 text-overflow

文本溢出经常用到的应该就是 `text-overflow:ellipsis` 了，只需轻松几行代码就可以实现单行文本截断。

div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

二、-webkit-line-clamp 实现

div {
        /* autoprefixer: off */
      /* autoprefixer: ignore next */   
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

它需要和 `display`、 `-webkit-box-orient` 和 `overflow` 结合使用：

*  `display:-webkit-box;` 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
 *  `-webkit-box-orient;` 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
 *  `text-overflow:ellipsis;` 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

三、定位元素实现多行文本截断

p {
        position: relative;
        line-height: 
        18px;
        height: 
        36px;
        overflow: hidden;
    }
    p::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
    /* 为了展示效果更好 */
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    }