文档章节

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

JackFace
 JackFace
发布于 2016/06/15 10:55
字数 275
阅读 36
收藏 0

 先来回顾下,单行文本换行的写法:

html代码

A20 Banana Pi Development Board Module - Deep Blue

CSS代码

.title{
    width: 150px;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Demo

 

        上面的代码是早就有的标准单行文本溢出省略号的写法,在非常多的场景下我相信大家都可能使用过这种写法。

        多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp,可惜这个API居然目前只有chrome才能支持,而且并没有列入W3C的标准范凑内,也就是日后这个功能也只能是在chrome下才能用,这实在太可惜了,不过现在的移动端都是用的webkit的内核,所以可以放心的使用上面的API,接着来看下实现Demo:

html代码

A20 Banana Pi Development Board Module - Deep Blue

CSS代码

.title{
    width:150px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Demo

转载请注明来自 520UED http://www.520ued.com/article/54192b4b8d31c11e3b000400

本文转载自:http://www.520ued.com/article/54192b4b8d31c11e3b000400

共有 人打赏支持
JackFace
粉丝 17
博文 51
码字总数 47363
作品 0
库尔勒
程序员
私信 提问
css3文本溢出显示控制

1.单行文本溢出显示省略号(…) 设置元素为块级元素display:block,设置元素宽度width,设置overflow:hidden,设置文本溢出显示状态text-overflow:ellipsis; white-space是否在容器边界换行,n...

w-rain
2016/01/08
194
0
CSS控制文字只显示一行,超出部分显示省略号

之前使用过这个例子,现在总结说明一下: 先给贴代码: <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> </p> 测试浏览器: IE6/7/8/9、opera12.0......

曾沙
2012/10/29
0
0
CSS填坑代码大全

文字溢出省略号显示 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 文字换行 /强制不换行/white-space:nowrap;/自动换行/word-wrap: break-word;word-break: normal;/强......

ITer在路上
2015/10/08
69
0
纯css实现多行文本截断

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

gongzhen
2016/07/07
0
0
CSS实现单行、多行文本溢出显示省略号(…)

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

ForingY
2015/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是以太坊DAO?(二)

Decentralized Autonomous Organization,简称DAO,以太坊中重要的概念。一般翻译为去中心化的自治组织。 在上一节中,我们为了展示什么是DAO创建了一个合约,就像一个采用邀请制的俱乐部,会...

geek12345
28分钟前
4
0
全屋WiFi彻底无死角 这才是终极解决方案

无线网络现在不仅在家庭中不可或缺,在酒店、医院、学校等场景中的需求也越来越多。尤其是这些场景中,房间多但也需要每个房间都能够完美覆盖WiFi,传统的吸顶式AP就无法很好的解决问题。 H3...

linux-tao
42分钟前
4
0
Python日期字符串比较

需要用python的脚本来快速检测一个文件内的二个时间日期字符串的大小,其实实现很简单,首先一些基础的日期格式化知识如下 复制代码 %a星期的简写。如 星期三为Web %A星期的全写。如 星期三为...

dragon_tech
42分钟前
3
0
ORA 各种oraclesql错误

ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最大会话许可数 ORA-00020: 超出最大进程数 () ORA-00021: 会话附属于其它某...

青峰Jun19er
46分钟前
3
0
没错,老板让我写个 BUG!

前言 标题没有看错,真的是让我写个 bug! 刚接到这个需求时我内心没有丝毫波澜,甚至还有点激动。这可是我特长啊;终于可以光明正大的写 bug 了🙄。 先来看看具体是要干啥吧,其实主要就是...

crossoverJie
59分钟前
135
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部