一、前言
在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号
对于文本的溢出,我们可以分成两种形式:
- 单行文本溢出
- 多行文本溢出
二、实现方式
单行文本溢出省略
理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现
实现方式也很简单,涉及的css属性有:
- text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本
- white-space:设置文字在一行显示,不能换行
- overflow:文字长度超出限定宽度,则隐藏超出的内容
overflow设为hidden,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略
white-space:nowrap,作用是设置文本不换行,是overflow:hidden和text-overflow:ellipsis生效的基础
text-overflow属性值有如下:
- clip:当对象内文本溢出部分裁切掉
- ellipsis:当对象内文本溢出时显示省略标记(…)
text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
举个例子
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >
<style>
p{
overflow: hidden;
line-height: 40px;
width:400px;
height:40px;
border:1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
如下:
多行文本溢出省略
多行文本溢出的时候,我们可以分为两种情况:
- 基于高度截断
- 基于行数截断
基于高度截断
伪元素 + 定位
核心的css代码结构如下:
- position: relative:为伪元素绝对定位
- overflow: hidden:文本溢出限定的宽度就隐藏内容)
- position: absolute:给省略号绝对定位
- line-height: 20px:结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px:设定当前元素高度
- ::after {} :设置省略号样式
代码如下所示:
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden 隐藏多余文字
这种实现具有以下优点:
- 兼容性好,对各大主流浏览器有好的支持
- 响应式截断,根据不同宽度做出调整
一般文本存在英文的时候,可以设置word-break: break-all使一个单词能够在换行时进行拆分
基于行数截断
纯css实现也非常简单,核心的css代码如下:
- -webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)
- display: -webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示
- -webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
- overflow: hidden:文本溢出限定的宽度就隐藏内容
- text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本
<p>
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >
<style>
p {
width: 400px;
border-radius: 1px solid red;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
上述使用了webkit的CSS属性扩展,所以兼容浏览器范围是PC端的webkit内核的浏览器,由于移动端大多数是使用webkit,所以移动端常用该形式
需要注意的是,如果文本为一段很长的英文或者数字,则需要添加word-wrap: break-word属性
还能通过使用JS实现配合CSS,实现代码如下所示:
CSS结构如下:
p {
position: relative;
width: 400px;
line-height: 20px;
overflow: hidden;
}
.p-after:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
JS结构如下:
$(function(){
//获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号
$('p').each(function(i, obj){
var lineHeight = parseInt($(this).css("line-height"));
var height = parseInt($(this).height());
if((height / lineHeight) >3 ){
$(this).addClass("p-after")
$(this).css("height","60px");
}else{
$(this).removeClass("p-after");
}
});
})
三、实现单行/多行文本溢出的省略样式有以下优点和缺点:
优点:
- 简单易用:实现起来相对简单,只需要使用少量的CSS属性即可达到效果。
- 提升用户体验:在有限的空间内展示更多的文本内容,减少页面的滚动和垂直空间的占用,提升用户的阅读体验。
- 增加页面美观度:将过长的文本进行省略显示,避免了文本内容的超出容器边界,使页面看起来更加整洁美观。
缺点:
- 仅支持部分浏览器:多行文本溢出的省略样式目前仅在WebKit浏览器中支持,其他浏览器需要使用其他技术来实现,如JavaScript。
- 无法显示完整内容:由于被省略的文本被隐藏起来,用户无法直接查看完整的文本内容,可能需要通过其他方式或交互来展示完整内容。
- 不适用于某些场景:单行/多行文本溢出的省略样式适用于简短的标题、摘要等内容,但对于需要展示完整详细内容的情况可能不太合适,如长篇文章或富文本编辑器。
综上所述,单行/多行文本溢出的省略样式在提升用户体验和页面美观度方面有一定的优势,但也存在浏览器兼容性和内容展示不完整等局限性。在选择使用时需要根据具体需求和使用场景进行权衡。
四、单行/多行文本溢出的省略样式多适用于以下场景:
- 标题:当标题文本过长时,使用省略样式可以让标题显示更加简洁,同时不影响用户通过其他方式查看完整标题。
- 摘要:摘要文本通常较短,但当某些摘要内容过长时,使用省略样式可以让页面更加美观。
- 卡片布局:在卡片式布局中,每个卡片通常只能容纳有限的文本内容,因此使用省略样式可以节约空间,提升布局效果。
- 评论、留言等列表:评论、留言等用户生成的文本可能存在过长的情况,使用省略样式可以避免页面过长,同时让用户可以通过点击或其他交互方式来展开完整评论。
需要注意的是,单行/多行文本溢出的省略样式并不适用于所有场景。对于需要展示完整详细内容的情况,如长篇文章、富文本编辑器等,不建议使用该样式。此外,在实际使用时还需考虑具体页面布局和设计要求等因素。