text-overflow:ellipsis实现超出隐藏时省略号显示
text-overflow:ellipsis;要达到的效果是：文字超出容器宽度时，文字被隐藏的文字用省略号代替。所以该属性只能用于块状元素或行内块元素中，对行内元素是不起作用的。
一般和white-space:noworp;(强制文字不换行)，overflow:hidden;(文字溢出隐藏)，一起使用。
eg1:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
</head>
<style type="text/css">
body,div{margin: 0;padding: 0;}
.text{
width: 200px;
overflow: hidden;
border: 1px solid #c66;
white-space: nowrap;
text-overflow:ellipsis;
}
</style>
<body>
<div class="text">轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬</div>
</body>
</html>
eg2:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
</head>
<style type="text/css">
body,span{margin: 0;padding: 0;}
.text{
border: 1px solid #c66;
padding:5px 10px;
display: inline-block;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
</style>
<body>
<span class="text">轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬</span>
</body>
</html>
行内元素要显示省略号，需要先转化成块状元素或行内块元素。
text-overflow:ellipsis实现超出隐藏时省略号显示的更多相关文章
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- css 实现div内显示两行或三行，超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示 ...
- 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）
文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...
- CSS多行文字超出隐藏加省略号
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...
- css超出内容以省略号显示
控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...
- Div里超出部分，省略号显示
1.一行显示并出现省略号 1)三个属性: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidde ...
- 【css】文本超出行数以省略号显示
//超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- css 超出部分以省略号的形式显示
想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度,然后添加以下属性 overflow: hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/*超出 ...
随机推荐
- SqlSever基础 两个条件 group by 分组显示
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- BZOJ 2758 Blinker的噩梦(扫描线+熟练剖分+树状数组)
题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2758 题意:平面上有n个多边形(凸包和圆).任意两个多边形AB只有两种关系:(1) ...
- 曲线救国，解决Mac系统下，Android sdk下载失败的问题
Mac下翻_墙的问题 话说GFW屏蔽谷歌已经有一阵子了,最近打算在Mac系统下折腾个Android应用,备好了IDE,只欠SDK,无奈下载时因为GFW的缘故,总是失败,我心痛哉! 由于本人偏爱Mac系 ...
- MusigCV安装
首先,将下载的安装文件zip包,http://www.mathworks.com/products/compiler/mcr/ MCR2013a 然后依次执行下面的命令: 进入目录:cd /tmp 解 ...
- mybatis的基本配置：实体类、配置文件、映射文件、工具类 、mapper接口
搭建项目 一:lib(关于框架的jar包和数据库驱动的jar包) 1,第一步:先把mybatis的核心类库放进lib里
- 自动编号维护SNRO
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- So easy Webservice 1.Socket建设web服务
socket 是用来进行网络通讯的,简单来说,远程机器和本地机器各建一个socket,然后通过该socket进行连接通讯 socket简单模型图: socket的原理图: 代码实现: 1.创建sock ...
- NoSQL系列：选择合适的数据库
NoSQL系列:选择合适的数据库 为什么使用NoSQL数据库? 阻抗失衡 关系模型和内存中的数据结构不匹配 采用更为方便的数据交互方式提升开发效率 待处理的数据量很大 数据量超过关系型数据库的承载能力 ...
- python_way day10 python和其他语言的作用域 、 python2.7多继承和3.5多继承的区别 、 socket 和 socketserver源码（支持并发处理socket，多进程，多线程）
python_way day10 1.python的作用域和其他语言的作用域 2.python2.7多继承和3.5多继承的区别 3.socket和socketserver源码(并发处理socket) ...
- .NET 4.0 任务和并行编程系列
8天玩转并行开发 8天玩转并行开发——第一天 Parallel的使用 8天玩转并行开发——第二天 Task的使用 8天玩转并行开发——第三天 plinq的使用 8天玩转并行开发——第四天 同步机制(上 ...