写点什么

CSS 技巧 | 优雅的处理文本溢出截断

用户头像
devpoint
关注
发布于: 2021 年 06 月 15 日
CSS技巧 | 优雅的处理文本溢出截断

文本溢出截断是一个比较常见的场景,如新闻列表页、微博列表、商品列表等,溢出截断主要是为了保证界面的整齐。在《前端开发需要知道的 10 个 CSS 技巧》中有提到过多行文本溢出的处理,本文总结一些优雅的处理文本溢出截断的方法。


先来看一段 html,如下:


<div class="block">    <div class="block-content">        <p>卡耐基对微笑有这样的描述:“它在家中产生,他不能买,不能求,不能借,不能偷,因为在人们得到它之前,对谁都是无用的东西,他给予后人之后,会使你得到别人的好感,它是疲倦者的休息,希望的阳光,悲哀者的力量,又是大自然免费赋予人们的一种解除苦难的良药。” </p>    </div></div>
复制代码


基础样式如下:


.block {    width: 400px;    background-color: #fff;    border: 3px solid #646464;}.block-content {    text-align: justify;}
复制代码



希望把内容限制在三行以内,多余的部分已省略号 替换,下面就围绕这个需求来展开。

line-clamp

之前有介绍过,使用 line-clamp,下面修改样式 .block-content ,如下:


.block-content {    display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    text-align: justify;    overflow: hidden;}
复制代码


现在效果如下:



从效果上来看,是达到了需求,CSS 完美的解决了。个人觉得前端开发还需要一点审美,上面的效果看着很难受,文字内容和边框之间没有距离产生压抑感。


接下来尝试增加一些边距,修改样式,如下:


.block-content {    display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    text-align: justify;    overflow: hidden;    padding: 1.5em;}
复制代码



一行代码,产生了边距,但不符合需求了,是的,填充让 line-clamp 效果显得不那么完美,需要改成下面这样:


.block-content {    display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: horizontal;    text-align: justify;    overflow: hidden;    padding: 1.5em 1.5em 0em 1.5em;    margin-bottom: 1.5em;}
复制代码


这样都达到预期目的了,效果如下:



在使用 line-clamp 处理文本溢出截断的时候设置 padding-bottom 需要特别注意

增加淡出效果

这种方案只适合固定高度的文本模块,在上面实现方案的基础上,设置 line-height: 1.6em;,展示 3 行文本,那么高度就是 4.8em(1.6em × 3)。接下来增加一个fade-out样式,代码如下:


.fade-out {    position: relative;    height: 4.8em;}.fade-out:after {    position: absolute;    width: 50%;    height: 1.6em;    content: "";    text-align: right;    bottom: 0;    right: 0;    background: linear-gradient(        to right,        rgba(255, 255, 255, 0),        rgba(255, 255, 255, 0.9) 50%    );}
复制代码


将其增加到 .block-content 元素上,即 class="block-content fade-out",看到效果如下:



更改溢出省略符

默认的溢出省略符为,参照上面方案的实现原理,可以将溢出省略符换成希望的内容,示例换成 ==> ,增加样式 .truncation ,代码如下:


.truncation {    position: relative;    max-height: 4.8em;    overflow: hidden;    padding-right: 1rem;}.truncation::before {    position: absolute;    content: "==>";    width: 2em;    height: 1.6em;    line-height: 1.2em;    bottom: 0;    right: 1.2em;    z-index: 2;    color: #ff0000;    text-align: center;}.truncation::after {    content: "";    position: absolute;    width: 2em;    height: 1.6em;    background: #ffffff;    bottom: 0;    right: 1.2em;    z-index: 1;}
复制代码


html 对应结构:


<div class="block">    <div class="block-content truncation">        <p>卡耐基对微笑有这样的描述:“它在家中产生,他不能买,不能求,不能借,不能偷,因为在人们得到它之前,对谁都是无用的东西,他给予后人之后,会使你得到别人的好感,它是疲倦者的休息,希望的阳光,悲哀者的力量,又是大自然免费赋予人们的一种解除苦难的良药。” </p>    </div></div>
复制代码


效果如下:



JavaScript 方式

使用 JavaScript 方式实现文本溢出截断需求有很多种方案,这里介绍一种使用 Clamp.js 库,兼容大部分浏览器,不足的是需要作用在包含文本的标签上,如本实例就需要传入的对象是 .block-content p,代码如下:


const blockContent = document.getElementById("block-content-p");$clamp(blockContent, {    clamp: 3,    useNativeClamp: false,    truncationChar: " ",    truncationHTML: '&nbsp;<strong style="color:#ff0000;font-weight:bold;">==></strong>',});
复制代码


效果如下:



发布于: 2021 年 06 月 15 日阅读数: 19
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
CSS技巧 | 优雅的处理文本溢出截断