超简洁网站,网页设计与制作教程psd格式,wordpress 添加导航栏,东莞网站建设美丽前言 最近博主在字节面试中遇到这样一个面试题#xff0c;这个问题也是前端面试的高频问题#xff0c;作为一名前端开发工程师#xff0c;css是我们的必备技能#xff0c;文本溢出问题也是我们经常遇到的问题#xff0c;我们不仅只是处理这种情况#xff0c;还要考虑他的… 前言 最近博主在字节面试中遇到这样一个面试题这个问题也是前端面试的高频问题作为一名前端开发工程师css是我们的必备技能文本溢出问题也是我们经常遇到的问题我们不仅只是处理这种情况还要考虑他的兼容性博主在这给大家细细道来。 作者简介程序员小豪全栈工程师热爱编程曾就职于蔚来、腾讯现就职于某互联网大厂技术栈Vue、React、Python、Java 本文收录于小豪的前端系列专栏后续还会更新前端入门以及前端面试的一些相关文章手把手带你从零学习前端到面试找工作并如果有想进入前端领域工作的同学这个前端专栏会对你有所帮助欢迎关注起来呀 本人也会持续的去关注AIGC以及人工智能领域的一些动向并总结到博客中大家感兴趣的可以关注一下我的人工智能专栏 云原生的入门学习系列大家有兴趣的可以看一看 目录 二、实现方式单行文本溢出省略多行文本溢出省略基于高度截断伪元素 定位基于行数截断 总结 # 一、文本溢出
在日常开发展示页面如果一段文本的数量过长受制于元素宽度的因素有可能不能完全显示为了提高用户的使用体验这个时候就需要我们把溢出的文本显示成省略号
对于文本的溢出我们可以分成两种形式
单行文本溢出多行文本溢出
二、实现方式
单行文本溢出省略
理解也很简单即文本在一行内显示超出部分以省略号的形式展现
实现方式也很简单涉及的css属性有
text-overflow规定当文本溢出时显示省略符号来代表被修剪的文本white-space设置文字在一行显示不能换行overflow文字长度超出限定宽度则隐藏超出的内容
overflow设为hidden普通情况用在块级元素的外层隐藏内部溢出元素或者配合下面两个属性实现文本溢出省略
white-space:nowrap作用是设置文本不换行是overflow:hidden和text-overflowellipsis生效的基础
text-overflow属性值有如下
clip当对象内文本溢出部分裁切掉ellipsis当对象内文本溢出时显示省略标记…
text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
举个例子
stylep{overflow: hidden;line-height: 40px;width:400px;height:40px;border:1px solid red;text-overflow: ellipsis;white-space: nowrap;}
/style
p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本/p 效果如下 可以看到设置单行文本溢出较为简单并且省略号显示的位置较好
多行文本溢出省略
多行文本溢出的时候我们可以分为两种情况
基于高度截断基于行数截断
基于高度截断
伪元素 定位
核心的css代码结构如下
position: relative为伪元素绝对定位overflow: hidden文本溢出限定的宽度就隐藏内容position: absolute给省略号绝对定位line-height: 20px结合元素高度,高度固定的情况下,设定行高, 控制显示行数height: 40px设定当前元素高度::after {} 设置省略号样式
代码如下所示
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;}
/stylebodydiv classdemo这是一段很长的文本/div
/body实现原理很好理解就是通过伪元素绝对定位到行尾并遮住文字再通过 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多行文本的情况下用省略号“…”隐藏溢出范围的文本
stylep {width: 400px;border-radius: 1px solid red;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
/style
p这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
/p 可以看到上述使用了webkit的CSS属性扩展所以兼容浏览器范围是PC端的webkit内核的浏览器由于移动端大多数是使用webkit所以移动端常用该形式
需要注意的是如果文本为一段很长的英文或者数字则需要添加word-wrap: break-word属性
还能通过使用javascript实现配合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%);
}javascript代码如下
$(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);}});
})总结
各位看官老爷们好小豪已经建立了技术交流群如果你很感兴趣可以私信我加入我的社群。
社群中不定时会有很多活动例如学习资料分享、大厂面经分享、技术讨论、行业大佬创业杂谈等等。
本人目前是在互联网大厂正式工作也有过多个大厂的工作经历加入社群也会有简历修改辅导模拟面试手把手项目实战教学大厂工作内推机会以及大厂面试题解析分享等福利。
社群方向很多相关领域有Web全栈前后端、人工智能、AIGC、自媒体变现、前沿科技文章分享、论文精读等等。
不管你是多新手的小白都欢迎你加入社群中讨论、聊天、分享加速助力你成为下一个技术大佬也随时欢迎您跟我沟通一起交流一起成长。变现、进步、技术、资料、项目、你想要的这里都会有
网络的风口只会越来越大风浪越大鱼越贵欢迎您加入社群~一个人可以或许可以走的很快但一群人将走的更远
想都是问题做都是答案行动起来吧欢迎评论区or后台与我沟通交流也欢迎您扫描下方二维码直接加入到我的交流社群(微信adcoderhao)
