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种语言

### CSS多行文本溢出省略号的实现方式 为了在CSS中实现多行文本溢出时显示省略号的效果,并能指定具体的行数,通常会采用`-webkit-line-clamp`属性者通过伪元素和浮动的方式解决兼容性问题。 #### 方法一:使用 `-webkit-line-clamp` 这是一种较为简洁的方法,在WebKit内核浏览器上表现良好。以下是具体实现: ```css .multi-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 指定要显示的具体行数 */ overflow: hidden; } ``` 此方法利用了`display: -webkit-box`将容器内的内容转换为弹性盒子模型,配合`-webkit-box-orient: vertical`设置垂直方向排列子项,最后通过`-webkit-line-clamp`限定最大行数[^4]。 需要注意的是,这种方法主要适用于基于Webkit内核的浏览器(如Chrome、Safari),而在其他非Webkit内核的浏览器中可能无法正常工作。 #### 方法二:伪元素与绝对定位结合 对于需要更广泛兼容性的场景,可以通过伪元素和绝对定位的方式来模拟多行文本溢出效果。这种方式的核心在于隐藏多余的部分并通过伪元素添加省略号。 HTML结构如下: ```html <div class="multi-line-compat"> 这是一段较长的文本,它可能会超出容器的高度,因此我们需要让它在超出后自动截断并显示省略号。文本可以有很多行,但是当文本超过指定的行数时,应该只显示指定行数的内容,并在最后一行末尾添加省略号。 </div> ``` 对应的CSS样式定义为: ```css .multi-line-compat { position: relative; line-height: 1.5em; /* 单行高度 */ max-height: 4.5em; /* 总高度等于line-height * 行数 */ overflow: hidden; } .multi-line-compat::after { content: "..."; position: absolute; bottom: 0; right: 0; background: white; /* 背景色需匹配父级背景色 */ padding-left: 10px; } ``` 上述代码中,`.multi-line-compat`设置了相对定位以及固定的总高度(由单行高度乘以期望的最大行数组成)。而`:after`伪元素则负责在文本末端追加省略号,并通过覆盖部分文字达到视觉上的截断效果[^3]。 这两种方案各有优劣,前者简单易用但存在一定的局限性和兼容性风险;后者虽然复杂度稍高,却能在更多环境中稳定运行。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值