文档章节

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

JackFace
 JackFace
发布于 2016/06/15 10:55
字数 275
阅读 34
收藏 0
点赞 0
评论 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
博文 49
码字总数 47020
作品 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
css之技巧和经验

说明:本文档兼容性测试基础环境为:windows系统;IE6-10, Firefox4-17, Chrome16-23, Win Safari5.1.7, Opera11.5-12.5 CSS技巧和经验列表(*以下实例默认运行环境都为Standard mode): 如...

假行僧396741
2017/01/14
0
0
easyui datagrid 单元格内文本超出长度显示省略号

easyui datagrid 单元格实现溢出文本显示省略号效果: 方案一:css方案,超出部分省略号 方案二:js方案,鼠标悬停显示全部内容

荆瑶
2016/10/30
36
0
css中text-overflow:ellipsis文本溢出产生省略号

text-overflow : clip | ellipsis 参数:   clip :  不显示省略标记(...),而是简单的裁切 (PS:clip这个参数是不常用的!)   ellipsis :  当对象内文本溢出时显示省略标记(...)...

Reya滴水心
2015/08/12
0
0
单独的一些相关内容

1.热区Map标签 area 点击热区 例子: shape = "circle" 圆形coords = "圆心点x,圆心点y,圆的半径" shape = "rect" 矩形 coords = "矩形左上角x,矩形左上角y,矩形右下角x,矩形右下角y" ...

ShuenWang
2017/04/11
0
0
有限长度空间内文本长度超出后通过css实现截取并显示省略号的方法

实现方法: html:<div class="outer2"> <div class="outer"> <span class="inner">朗御2单元29F弱电井F-RRU637677_05</span> </div></div>css:.outer{ }.inner{ } max-width内外元素都要设置......

呵呵闯
2016/11/29
11
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell及python脚本方式登录服务器

一、问题 在工作过程中,经常会遇见需要登录服务器,并且因为安全的原因,需要使用交互的方式登录,而且shell、python在工作中也经常用到,并且可以提供交互的功能。都是利用了expect、spawn...

yangjianzhou
10分钟前
0
0
upstream sent too big header while reading...

nginx 报错:1736 upstream sent too big header while reading response header from upstream 1. 一般处理 location ~ \.php$ { #增加下面两句 fastcgi_buffer_size 128k; ......

dubox
21分钟前
0
0
Python解析配置文件模块:ConfigPhaser

import configparser as pa# [SectionA]# a = aa# b = bb# c = cc# [SectionB]# optionint = 1# optionfloat = 1.1# optionstring = string#https://www.cnblogs.com/a......

易野
27分钟前
0
0
Java基础——面向对象

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Object的方法: clone() Object 克隆 to Strin...

凯哥学堂
29分钟前
0
0
rabbitmq学习记录(八)消息发布确认机制

RabbitMQ服务器崩了导致的消息数据丢失,已经持久化的消息数据我们可以通过消息持久化来预防。但是,如果消息从生产者发送到vhosts过程中出现了问题,持久化消息数据的方案就无效了。 Rabbit...

人觉非常君
33分钟前
0
0
毕业5年,我是怎么成为年薪30W的运维工程师

#转载# 我在大学读的是计算机专业,但大学毕业之后,进入到一家私企进行工作,工作的内容类似于网管,会经常的去修电脑,去做水晶头等内容。刚开始工作,也没想太多,最想的是丰富自己的工作...

Py爱好
41分钟前
1
0
大数据基础知识,大数据学习,涉及的知识点

一、什么是大数据 一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模、快速的数据流 转、多样的数据类型和价值密度低四大特征。...

董黎明
56分钟前
0
0
Linux CentOS 7上安装极点五笔

话说几天前在新买的惠普笔记本上成功地安装了Linux CentOS 7操作系统、Nvidia Quandro P600驱动程序及X Window,并在VMware下安装Red Hat教学环境,彻底跳出Windows的苦海,但仍然有一件事不...

大别阿郎
今天
17
0
2018年7月20日集群课程

一、集群介绍 集群,简单地说是指一组(若干个)相互独立的计算机,利用高速通信网络组成一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器。 ...

人在艹木中
今天
0
0
spark开发机中调试snappy

目的 在Idea中的点击运行,使spark可以直接读取snappy 自己编译hadoop,以支持snappy的压缩。 自己编译的目的就是要得到支持snappy文件读写的动态链接库。如果可以在网上下载,可以跳过自行编...

benny周
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部