文档章节

CSS3文字超出两行或者多行显示省略号-webkit-line-clamp属性

甄佰匠人
 甄佰匠人
发布于 2017/03/10 17:38
字数 277
阅读 418
收藏 1

CSS3文字超出两行或者多行显示省略号

 

超出一行显示省略号都会写,如下

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

.ellipsis-2 {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

超出两行省略号↑

 

.ellipsis-3 {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    word-wrap: break-word;/*允许长单词或 URL 地址进行换行。*/

    white-space: normal!important;/*空白被浏览器忽略*/

}

超出三行省略号↑

超出多行只需要修改数字-webkit-line-clamp: number;

© 著作权归作者所有

共有 人打赏支持
甄佰匠人
粉丝 3
博文 154
码字总数 86632
作品 0
浦东
程序员
私信 提问
-webkit-line-clamp实现多行文字溢出隐藏显示省略号

概述: -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来...

欢乐小金鱼
2015/03/24
0
1
CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden;text-overflow:ellipsis;white-...

ForingY
2015/10/28
0
0
css设置当字数超过限制后以省略号(...)显示

文字超出一行,省略超出部分,显示'...' 用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 多行文本溢出显示省略号 注: ①-webkit-line-clamp用来限制在一个块元素...

Mr_C墨城
2017/11/03
0
0
【CSS】多行文本超出部分省略号

多行文本超出部分用省略号代替: HTML CSS -webkit-line-clamp 是一个不规范属性。 它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的...

滑滑兔
2018/09/15
0
0
整理一下最近遇到的ie8兼容问题

1.图片边框问题,给img设置border-style:none;即可解决。 2.input输入框光标不垂直居中问题,给input设置line-height为Input输入框的高度即可。 3.border-radius,box-shadow在ie8下不兼容,据...

kitty1116
2018/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

搜索引擎(Elasticsearch搜索详解)

学完本课题,你应达成如下目标: 掌握ES搜索API的规则、用法。 掌握各种查询用法 搜索API 搜索API 端点地址 GET /twitter/_search?q=user:kimchy GET /twitter/tweet,user/_search?q=user:...

这很耳东先生
38分钟前
6
0
浅谈如何减少GC的次数

GC会stop the world。会暂停程序的执行,带来延迟的代价。所以在开发中,我们不希望GC的次数过多。 本文将讨论如何在开发中改善各种细节,从而减少GC的次数。 (1)对象不用时最好显式置为 Nu...

浮躁的码农
39分钟前
1
0
jpa 自定义返回对象

任何ORM框架都少不了开放自定义sql的问题。jpa自然也不例外,很多场景需要写复杂sql的。 首先定义一个方法签名,然后打上@Query注解。像下面这样,需要注意nativeQuery,这个表示query中的字...

朝如青丝暮成雪
今天
3
0
驰骋工作流引擎-批量审批设置

批量审批设置 关键词: 工作流引擎批量审批 Java工作流批量审批设计 应用场景 批量审批最多应用于代办中有很多相同的流程需要审批,若是把一些不是特别重要的审批做批量处理这样就可以提高很...

孟娟
今天
2
0
springmvc源码解析之DispatcherServlet四

说在前面 本次主要介绍DispatcherServlet,关注”天河聊架构“更多精彩。 springmvc配置解析 进入方法org.springframework.web.bind.annotation.support.HandlerMethodInvoker#resolveHttpE...

天河2018
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部