CSS 单行/多行文本溢出显示省略号(...)的实现

简介: CSS 单行/多行文本溢出显示省略号

作者:WangMin
格言:努力做好自己喜欢的每一件事

我们在项目开发的过程中也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本。而这个需求可以分解为两个,一个是单行溢出省略,一个是多行溢出省略。下面我们就开始一起学习吧!

1.jpg

实现文本超出显示省略号的常见属性

1)overflow: hidden
这里我们需要注意到一点:这里的overflow并不是设置为父级元素div的属性,而是给==需要文本省略的标签==的属性,需要和overflow的普通用法区分开来。

  • overflow:hidden的普通用法:用在块级元素(例如div)的外层隐藏溢出的内部元素。

2)text-overflow: clip \/ ellipsis;

这一属性依赖于overflow: hidden存在,只有设置了overflow:hidden它才是能够生效的,你可以把它看作overflow对于文本溢出隐藏的一种==特殊表现样式==。

clip:当元素内文本溢出时不显示省略标记(…),而是将溢出的部分裁切掉,默认值。
ellipsis:当元素内文本溢出时显示省略标记(…)。

注意:使用ellipsis时,必须配合overflow:hidden;white-space:nowrap;width:具体值;这三个样式共同使用才会有效果。

3)white-space: nowrap

它的作用是让文本不换行,这是overflow:hidden和text-overflow:ellipsis生效的基础!没有它overflow:hidden和text-overflow:ellipsis无法生效!(只适用于单行文本溢出省略)

4)-webkit-line-clamp: 数值(表示显示多少行);

用来限制在一个块元素显示的文本的行数,例如 -webkit-line-clamp: 2 表示最多显示 2 行。这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。 为了实现该效果,它需要组合其他的WebKit属性。(适用于多行文本溢出省略)

5)display: -webkit-box;(和 -webkit-line-clamp: 2;结合使用,将对象作为弹性伸缩盒子模型显示 )(适用于多行文本溢出省略)

6)-webkit-box-orient: vertical;(和 -webkit-line-clamp: 2;结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )(适用于多行文本溢出省略)

单行文本溢出的省略

需要在文本容器上设置overflow: hidden;white-space: nowrap;text-overflow: ellipsis这几个属性,还要给文本容器设置宽度(例如 width:200px)使overflow: hidden;生效,才能实现单行文本溢出的省略。代码与效果如下:

<p>
这里我们需要注意到一点:这里的overflow并不是设置为父级元素div的属性,
而是给==需要文本省略的标签==的属性,需要和overflow的普通用法区分开来。
</p>
p{
   
   
    width:300px; /*限制元素宽度*/
    line-height: 30px;
    border:1px solid #ccc;
    overflow: hidden; /*文本超出隐藏*/
    text-overflow: ellipsis; /*文本超出显示省略号*/
    white-space: nowrap; /*超出的空白区域不换行*/
}

2.png

优点:

  • 兼容性好,对各大主流浏览器有好的支持
  • 响应式截断,根据不同宽度做出调整
  • 文本溢出范围才显示省略号,否则不显示省略号
  • 省略号位置显示刚好
多行文本溢出的省略

从上面可以得到文本溢出我们经常用到的应该就是 text-overflow:ellipsisoverflow: hidden 了,但是对于多行文本的溢出处理确接触的不是很多。那么这里呢,就要给大家介绍一个属性 line-clamp ,但这个属性的兼用性差,==只有 WebKit 内核的浏览器才支持==,所以需要在属性前面加上 -webkit- 。-webkit-line-clamp的含义上面也已经提到了,它是用来限制在一个块元素显示的文本的行数。 为了实现这个效果,它需要组合上面提到的其他的WebKit属性:

  • display: -webkit-box 将对象作为弹性伸缩盒子模型显示;
  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式;
  • text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本。

代码与效果如下:

<p>
这里我们需要注意到一点:这里的overflow并不是设置为父级元素div的属性,
而是给==需要文本省略的标签==的属性,需要和overflow的普通用法区分开来。
</p>
p{
   
   
    width:300px; /*限制元素宽度*/
    line-height: 30px;
    border:1px solid #ccc;
    overflow: hidden; /*文本超出隐藏*/
    display:-webkit-box; /*盒子模型微弹性伸缩模型*/
    -webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
    -webkit-line-clamp: 3; /*文本显示3行*/
}

3.png

[ 注意 ]
1、四行CSS缺一不可!
2、因为这是webkit的CSS属性扩展,所以兼容浏览器范围是PC端的webkit内核的浏览。器:chrome/safari/QQ浏览器/360/猎豹等以及绝大多数的移动端浏览器。

以下是-webkit-line-clamp在各个浏览器的兼容:

4.png

多行文本省略的其他方式

目前没有什么CSS的属性可以直接控制多行文本的省略显示,比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了,代码参考如下:

<p>
这里我们需要注意到一点:这里的overflow并不是设置为父级元素div的属性,
而是给==需要文本省略的标签==的属性,需要和overflow的普通用法区分开来。
</p>
p{
   
   
    width:300px; /*限制元素宽度*/
    height: 60px; /* 高度为需要显示的行数*行高,比如这里我们显示两行,就是30 * 2,则为60px */
    line-height:30px;
    position: relative;
    line-height: 30px;
    border:1px solid #ccc;
    overflow: hidden; /*文本超出隐藏*/
}
p:after {
   
   
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding: 0 5px;
    background-color: #fff;
}

5.png

文本中如果有英文,希望让一个单词能够在换行时进行拆分,我们可以添加 word-break: break-all; 代码效果如下:

p{
   
   
    width:300px; /*限制元素宽度*/
    height: 60px; /* 高度为需要显示的行数*行高,比如这里我们显示两行,就是30 * 2,则为60px */
    line-height:30px;
    word-break: break-all; /*如果文本中有英文,可以使一个单词能够在换行时进行拆分*/
    position: relative;
    line-height: 30px;
    border:1px solid #ccc;
    overflow: hidden; /*文本超出隐藏*/
}

6.png

不过这样有时候会让整个单词显示不完整,根据自己的需求来使用这个属性。

利用第二种的多行文本省略方式会有一点问题:

  • 无法识别文字的长短,无论文本是否溢出范围,一直显示省略号省略号。
  • 显示可能不会刚刚好,有时会遮住一半文字,跟文字没有贴合的很紧密。这里'属'就被遮住了一部分。
  • 需要知道显示的行数并设置行高才行。
  • IE6/7不支持after和content,需要添加一个标签来代替。
  • 省略号的背景颜色跟文本背景颜色一样,并且可能会遮住部分文字,建议可以使用渐变的png背景图片代替。

以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
21小时前
|
前端开发
css文本垂直展示------
css文本垂直展示------
5 1
css文本垂直展示------
|
21小时前
|
前端开发
css文本处理,单行多行溢出隐藏,首行缩进2字符,
css文本处理,单行多行溢出隐藏,首行缩进2字符,
4 0
|
2天前
|
前端开发 容器
CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
该文本是关于CSS样式技巧的摘要:包括单行和多行文本超出时的省略显示方法,以及Flex布局的两端对齐和一行超出后多行居中的示例代码。
|
2天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
2天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
2天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0
|
2天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
18 0
HTML5/CSS3粒子效果进度条代码
|
2天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
2天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。