css3文字一行或多行展示,多余文字省略号(学习)超出隐藏

博客主要介绍了CSS3实现文字一行展示,多余文字用省略号表示的方法。还提及了多行展示情况,以及鼠标悬停时文字可显示出来,同时给出了text - overflow和overflow的相关属性设置。
部署运行你感兴趣的模型镜像

  css3文字一行展示,多余文字省略号

重点:

一行展示:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

多行展示:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*行数*/
-webkit-box-orient: vertical;

hover可以显示出来

text-overflow: inherit
overflow: visible

seat-number
  width 100%
  font-size 12px
  text-align center
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden
  &:hover
    text-overflow: inherit
    overflow: visible

 

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值