CSS换行文本溢出显示省略号，多行

首先，div部分

1 <body>
2         <div>多行的显示该如何解决呢，后面经过一番google后，我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp</div>
3     </body>

然后，css部分

1.单行

1   div {
2     width: 150px;
3     overflow: hidden;
4     text-overflow: ellipsis;
5     display: -webkit-box;
6     -webkit-line-clamp: 2;
7     -webkit-box-orient: vertical;
8     background-color: lightcoral;
9 }

2.多行

主要是用到了-webkit-line-clamp。由于是-webkit，很幸运的移动端的页面可以做兼容。

pc端的话，Firefox、IE、edge不可用，chrome、safari、opera可用。

时间： 2024-10-08 10:44:31

CSS换行文本溢出显示省略号，多行的相关文章

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

网页之文本溢出显示省略号

1.单行文本溢出显示省略号的css写法 1 overflow:hidden; 2 text-overflow:ellipsis; 3 white-space:nowrap;/*不换行*/ 2.多行文本显示省略号 这里根据应用场景来实现 1)Webkit浏览器或移动端页面 可以使用webkit的私有属性:-webkit-line-clamp(这个属性不属于css规范),该属性用来显示块元素显示的文本行数.要实现该效果,需要组合其他的Webkit属性. 常见结合的属性: display: -webk

单行文本溢出显示省略号.多行文本溢出显示省略号

单行文本溢出显示省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

浅谈移动端过长文本溢出显示省略号的实现方案

本文首发于 vivo互联网技术 微信公众号? 链接: https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者:何彦军 目前在移动端开发的展示界面中,如果一段文本的数量过长,受限于屏幕的宽高等因素,有可能不能完全显示,这个时候就会把溢出的文本显示成省略号. 最近就亲身经历了一系列类似的需求,于是这里做个总结和记录. 首先一个最基本的需求就是当文本超过一行最大宽度时,超出的部分变为省略号,如下图所示. 这个功能比较基础,只用css就可以实现,如下图所

小程序文本溢出显示省略号（单行/多行）

1.单行:外部容器应加overflow: hidden;否则不显示省略号 .text { font-size: 38rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2.多行 .text { font-size: 38rpx; line-height: 38rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; word-

HTML元素文本溢出显示省略号(...)

一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容. inherit 规定应该从父元素继承 ove

前端面试题-文本溢出显示省略号（...）

一.文本溢出隐藏 如下图所示,我们需要对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计的心情) 二.单行文本溢出隐藏 <style type="text/css"> .text { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } </style> 1. 注意 以上设置是单行文本溢出隐藏的3个必须CSS属性,缺一不可. 2. 说明 over

单行文本溢出显示省略号

用css实现:overflow: hidden;//影藏溢出部分 text-overflow:ellipsis;//显示省略号 white-space: nowrap;//单行文本不换行 原文地址:https://www.cnblogs.com/wangjianping123/p/8900669.html

css实现文本溢出显示...

在网页中显示文字内容时,经常会碰到文字内容特别长的情况,那么这个时候为了使网页看起来比较美观和简洁,会对内容进行处理.下面我们就来看一看,如何使用css来对文字溢出部分增加.... 首先来看第一种情况,对单行文字处理. <h2>单行溢出显示...</h2> <div class="single-line"> 我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本 </div> 页面显示的情况是这样