关于前端:CSS-实现文本不定行数截断

偶尔发现，在某乎热榜页有一个很有意思的布局，这里的题目会制约内容的行数，所以文本超出是 “ 不定行 ” 的。具体规定如下：

1. 整个容器高度是固定的，题目和内容总共 3 行
2. 题目最多 2 行，超出省略
3. 内容由残余空间决定，如果题目占 2 行，则内容超出 1 行省略；如果题目占 1 行，则内容超出 2 行省略

是不是很灵（离）活（谱）的交互？能够充分利用页面空间，保障题目和内容都能展现进去，示意如下

看了下原站的实现，是通过 js 判断题目高度，而后动静增加一个类名实现的。不过呢，通过一番推敲，这里也是能够纯 CSS 实现的，一起来看看吧

一、题目超出省略

假如有这样一段 HTML

<div class="section">
    <h3 class="title">LGD 在 TI10 放猛犸，RNG 在 S7 放加里奥最初都输了，哪个更让你愤恨悲观？</h3>
    <p class="excerpt"> 猛犸是对面的绝中绝，大家都晓得，并且之前扳回两局曾经证实了，当 lgd 抉择 ban 掉猛犸，或者本人抢掉猛犸时，对面齐全不是对手。</p>
</div>

题目的规定是超出 2 行省略，这个简略，间接用 -webkit-line-clamp 实现

.title{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

超出 2 行就会主动省略了

二、内容自适应行数

因为整个高度是固定的，如果让内容局部自适应残余空间是不是就实现了呢？提到 自适应残余空间，能够马上想到 flex 布局，所以能够这样来实现：

.section{
    display: flex;
    overflow: hidden;
    height: 72px;/* 定一个高度 */
    flex-direction: column;
}
.excerpt{
      flex: 1; /* 自适应残余空间 */
      overflow: hidden;
}

这样借助 flex: 1;overflow: hidden; 就简直实现了想要的成果，如下

曾经很完满，只是当初超出还没有省略号，接着往下看

三、不定行超出省略

个别状况，-webkit-line-clamp实用于行数确定的状况下，当初行数不定，有时是 1 行，有时是 2 行，如何解决呢？这里就须要一些奇技淫巧了。大家可能还记得这篇文章 CSS 实现多行文本“开展收起”，外面就提到了如何应用浮动来实现文本超出省略的成果，有趣味的能够参考一下。

1. 右下角盘绕成果

首先增加一个伪元素，设置右浮动

.excerpt::before{
    content: '...';
    float: right;
}

很显著省略号目前是在 右上角 的，当初须要挪到 右下角 来，之前的操作是通过一个浮动元素把这个省略号挤下来，然而须要额定的占位元素

这里再介绍一种新的形式，借助 CSS shapes 布局实现!

首先，将省略号高度撑满，并居下对齐，能够用 flex 实现

.excerpt::before{
    content: '...';
    float: right;
      height: 100%;
    display: flex;
    align-items: flex-end;
}

这样省略号尽管到了右下角，然而下面的局部也被挤走了，没有达到盘绕的成果。这时就能够用 shapes 布局了，不理解这个布局的，能够参考一下 张鑫旭 的这篇文章：写给本人看的 CSS shapes 布局教程 « 张鑫旭 - 鑫空间 - 鑫生存 (zhangxinxu.com)

这里仅仅只须要利用到 shape-outside:inset()就能够了，示意以本身为边界，而后上、右、下、左四个方向别离向内缩进的间隔。比方这里须要缩进到凑近省略号地位，所以

.excerpt::before{
    /* 其余款式 **/
      shape-outside: inset(calc(100% - 1.5em) 0 0);
}

成果如下

去除背景，能够看到省略号完满的盘绕在右下角

2. 自动隐藏省略号

当初还有一个问题，须要文本较少时暗藏省略号，该如何实现呢？能够试试“CSS 障眼法”

简略来说，就是用一个足够大的色块盖住省略号，设置相对定位后，色块是追随内容文本的，所以在文字较多时，色块也追随文本挤下去了，实现如下

.excerpt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
} 

原理示意如下

个别极其状况可能会遮挡不住，比方

没关系，能够轻易找个货色补上，比方 box-shadow，往左下角偏移一点就能够了

.excerpt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
      box-shadow: -2em 2em #fff; /* 左下的暗影 */
} 

设置和底色雷同的色彩后，最终的成果如下

这样就实现了文章结尾某乎的交互成果，残缺代码可拜访 auto-clamp (codepen.io)

四、总结和阐明

以上实现了一个不定行数的文本截断成果，交融了许多 CSS 小技巧，除了 shapes 布局以外（当然也能够采纳其余形式实现），没有太多生疏的属性，上面简略总结一下：

1. 多行省略间接应用 -webkit-line-clamp，古代浏览器都反对
2. flex 布局能够很不便的解决残余空间
3. float + shapes 布局也能够实现右下角盘绕成果
4. box-shadow 在障眼法中很常见
5. 适当积攒一些 CSS 奇技淫巧，有时候会帮上大忙

在我看来，布局的事件当然最好由 CSS 解决，实现更灵便，渲染更迅速，没有框架限度，无需期待 dom 加载，无需 JS 计算尺寸，无需遍历节点，益处太多了。如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤