web前端技术分享：多行文本溢出问题解决方案

2024-05-18 01:43:24

大家在前端开发过程中可能会遇到需要将多行文本溢出部分隐藏并替换为省略号的情况，这里小千就来给大家介绍一下解决方案。

单行文本溢出及省略

众所周知，在CSS3中单行文本省略一般使用text-overflow实现：text-overflow:ellipsis;

此属性仅当文本溢出时是显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义以下属性：

容器宽度: width：value;

强制文本在一行内显示: white-space：nowrap;

溢出内容为隐藏： overflow：hidden;

溢出文本显示省略号： text-overflow：ellipsis;

可惜这个属性只支持单行文本溢出显示省略号，并不支持多行文本。

多行文本溢出省略的几种方法

WebKit的一个CSS扩展属性可以限制在一个块元素中显示的文本的行数，它是一个不规范的属性（unsupported WebKit property），没有出现在CSS规范草案中。

-webkit-line-clamp:value;

该属性实现溢出省略效果还需要结合其他的属性：display: -webkit-box;

必须结合的属性，将对象作为弹性伸缩盒子模型显示：-webkit-box-orient:vertical;

必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式，此时便可以结合：text-overflow:ellipsis;实现多行文本省略。

兼容写法

把包含省略号的元素的定位在最后一行上，也能实现一个多行文本省略，没有花里胡哨的东西，只要调得准，基本可以兼容大部分浏览器，说的就是IE。（doge）

以上就是多行文本溢出问题的解决方案介绍了，大家留意一下最后的兼容写法，兼容问题是最容易被忽略的。

本文来自千锋教育，转载请注明出处。

web前端技术分享：多行文本溢出问题解决方案相关推荐

好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
web前端技术分享：详解模块化require 和 import的区别
在前端开发中,我们可以使用很多模块化的库来帮助我们更好的实现效果,有一些库的功能类似很多同学就不知道该如何选择,比如require和import,今天小千就给大家介绍一下两者的区别. 一.区别 1.r ...
Web前端技术分享：img标签下方出现空隙的问题解决方案
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图代码如下: 为什么会出现这种情况呢? 因为img是一种类似text的标签元素,在结束的 ...
Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...
web前端技术分享：常用JavaScript框架有哪些？
常用JavaScript框架有哪些?对于前端开发工作者来说,JavaScript绝对是绕不开的一个点,可以所前端的大部分动态交互都是由JS完成,所以学好JavaScript基本上你就成功了一半.下面小 ...
Web前端技术分享之前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来就给大 ...

最新文章

热门文章