首页 > 编程语言 >黑马程序员前端-CSS:溢出的文字省略号显示

黑马程序员前端-CSS:溢出的文字省略号显示

时间:2023-04-05 11:40:35浏览次数:35  
标签:显示 省略号 程序员 CSS webkit overflow 文本 溢出


按照HTML+CSS的学习顺序笔记已经更新了28篇内容了,因为篇幅问题,请看文末。

目录

一、单行文本溢出显示省略号

二、多行文本溢出显示省略号(了解即可)

三、往期合集


今天来学溢出文字省略号显示。

一、单行文本溢出显示省略号

黑马程序员前端-CSS:溢出的文字省略号显示_自学前端

单行文本溢出显示省略号必须满足三个条件:

/*1. 先强制一行内显示文本*/
   white-space: nowrap;  ( 默认 normal 自动换行)
   
  /*2. 超出的部分隐藏*/
   overflow: hidden;
   
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;

二、多行文本溢出显示省略号(了解即可)

黑马程序员前端-CSS:溢出的文字省略号显示_自学前端_02

多行文本溢出显示省略号,有较大兼容性问题,适合webkit浏览器或移动端(移动端大部分是webkit内核)

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐让后端开发人员来做这个效果,后台人员可以设置显示多少个字,操作起来更加方便。

标签:显示,省略号,程序员,CSS,webkit,overflow,文本,溢出
From: https://blog.51cto.com/u_8238263/6170365

相关文章

  • 黑马程序员前端-CSS盒子模型以及PS基础
    前端学习笔记教程不定期更新中,传送门:前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的复合选择器黑马程序员前端-CSS的显示模式黑马程序员前端-CSS背景黑马程序员前端-CSS三大特性:叠层性、继承性、优......
  • 黑马程序员前端-CSS三大特性:叠层性、继承性、优先级
    前端学习笔记教程不定期更新中,传送门:前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的复合选择器黑马程序员前端-CSS的显示模式黑马程序员前端-CSS背景上一期的CSS入门笔记没有更新完,继续更新中…今天......
  • CSS基础
    为满足网页的需要,来进行前端代码的学习CSS基础一:style<style>css标签</styte>例:对p标签进行更改<style>p{color:red;/*像素*/font-size:30px;/*背景*/background:aqua;/*宽度*/width:400px;}</style>二:引入方......
  • 黑马程序员高端iOS培训:苹果一条公告搅混了大家的脑洞
         正文前面,先说点正经的。苹果公司在北京时间8月30日凌晨正式向媒体发出邀请函,宣布将于北京时间9月8日凌晨1点在旧金山的比尔-格雷厄姆市政礼堂举行苹果秋季新品发布会。此次邀请函的主题为“Seeyouonthe7th”。     正经的说完了,不正经的要开始说了。或许是天......
  • web前端tips:CSS之sticky粘滞效果
    Sticky介绍Sticky是CSS3的一个定位属性,它可以让元素在滚动过程中“粘”在屏幕上的某个位置,直到滚动到某个临界点后才会跟随滚动。Sticky定位可以使得页面更具交互性和易用性,也提高了页面的可读性。Sticky定位可以通过以下代码实现:position:sticky;top:0;其中,top属性定义了......
  • ChatGPT淘汰程序员?不可能的!看代码生成机器人如何让我更强
    AIGC让程序员失业?不存在的!聆思开发聊天助手Chaty让你更高效地开发CSK芯片代码、更自在地摸鱼!当遇上十万火急,产品提完需求马上要怎么办?且看Chaty如何破局以往流程:Chaty加持:Chaty是什么是为聆思CSK芯片量身打造的开发助手系列,可根据开发者的需求进行代码生成、问题定位、辅助开发等......
  • #yyds干货盘点# LeetCode程序员面试金典:最接近的三数之和
    题目:给你一个长度为n的整数数组 nums 和一个目标值 target。请你从nums中选出三个整数,使它们的和与 target 最接近。返回这三个数的和。假定每组输入只存在恰好一个解。 示例1:输入:nums=[-1,2,1,-4],target=1输出:2解释:与target最接近的和是2(-1+2+1=2)......
  • css3 箭头上下跳动
    .container.stepsItem.permit.permitStepItem.table.showTable{width:.37rem;margin:.20remauto;position:absolute;bottom:0;left:50%;margin-left:-.18rem;-webkit-animation:opener.5sease-in-outalternateinfinite;......
  • app直播源码,css预加载旋转动画 与 流光字体
    app直播源码,css预加载旋转动画与流光字体一、预加载旋转动画Html<viewclass="concentric_round"></view>​cssbody{}.concentric_round{width:200rpx;height:200rpx;position:relative;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);}.......
  • CSS: position: relative absolute
    <divclass="course-b"><divclass="outer"><divclass="inner"></div></div></div>.outer{margin:50px;width:200px;height:200px;background:gray;......