开发者社区> 天行无忌> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

优雅的处理文本溢出截断

简介: 文本溢出截断是一个比较常见的场景,如新闻列表页、微博列表、商品列表等,溢出截断主要是为了保证界面的整齐。在《前端开发需要知道的 10 个 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;
}

image.png

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

line-clamp

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

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

现在效果如下:

image.png

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

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

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

image.png

一行代码,产生了边距,但不符合需求了,是的,填充让 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;
}

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

image.png

在使用 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",看到效果如下:

image.png

更改溢出省略符

默认的溢出省略符为,参照上面方案的实现原理,可以将溢出省略符换成希望的内容,示例换成 ==> ,增加样式 .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>

效果如下:

image.png

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>',
});

效果如下:

image.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring(十七)之表单处理
表单处理在实际开发中,非常常见,比如登录、注册或者新增、修改等等。 希望本示例对于初学者有一定的提升和帮助 该表单实例,主要说明MVC,相当于前台表单提交,提交相当于一个Http请求,这个请求通过Controller映射到对应的@RequestMapping,找到对应的@RequestMapping的value,即路由,经过该路由处理,将数据以Model或ModelAndView或ModelMap的形式返回给前台展示。
891 0
论如何优雅的处理回文串 - 回文自动机详解.
  写在前面 最近无意中看到了这个数据结构,顺便也就学习了一下。 而且发现网上关于这个算法的描述有很多地方是错的,在这里做了一些更正。 处理字符串的算法很多:KMP,E-KMP,AC自动机,后缀三兄弟:后缀树、后缀数组、后缀自动机,Trie树、Trie图,符串hash... 但以上数据结构在处理回文串上还是稍有欠缺,用这些来处理回文显得太小题大做。
1041 0
SQL——处理行的累加
       背景:               现在有一张报表,其中上面的数据是商家的订单数据,按照天统计的,要从订单表查出每天的某个商家的订单量,然后去日收益表查出这天的这个商家的收益额,然后还要统计出在某天之前的所有收益额,然后从查出的这种表里筛选出某个时间段的记录。
724 0
+关注
天行无忌
技术改变生活、研发构建未来、细节铸造品质!
255
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载