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

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-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

转: https://blog.csdn.net/z2516305651/article/details/80852726

原文地址:https://www.cnblogs.com/fps2tao/p/10101746.html

时间: 2024-08-01 18:33:42

小程序文本溢出显示省略号(单行/多行)的相关文章

小程序 文本溢出用省略号代替

1.使用text标签包裹文字 2.单行溢出 .类名{ white-space: nowrap; overflow:hidden; text-overflow:ellipsis; } 3.多行溢出 .类名{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-cliamp:2; // 设置行数 word-break:break-all; overflow:hidden; text-overflow:ellipsis; } 4

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

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

单行文本溢出显示省略号 <!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

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

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

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

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

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

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

截取长文本,显示省略号(多行)

其实也是前些日子做移动端的页面接到这么个需求,本来以为这没法实现,同事跟 我说-webkit-line-clamp属性可以,就去查了查,果然 Pc端基本不会有这种需求,因为这个方法兼容性太差,浏览器份额不是webkit 占大头(特别是天朝),看前缀就知道只支持webkit内核,他属于webkit内部属性, 和-webkit-text-size-adjust:none(这个Pc端已经不在支持,移动端还可以使用) 类似,但是移动端不一样,现在移动端基本是ios和Android的天下,这个属性还是 很

单行文本溢出显示省略号

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

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

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