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;/*超出 ...
随机推荐
- 3-WebPack
一. 什么是WebPack WebPack可以看做是模块加载.打包工具. 它所做的事情是 1.分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Typ ...
- CodeForces 651A Joysticks 贪心
A. Joysticks time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- Android 进度条
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- XML文件解析DOM解析和SAX解析
解析一个XML文档有哪些内容解析有:dom和sax两种dom:把整个XML文档放入内存,适合XML随机访问,占用内存资源大sax:事件驱动型的XML解析方式,顺序读取,不用一次装载整个文件,遇到标签会 ...
- SQL 汉字转换成拼音首字母 首字母查
-- ============================================= -- 功能:汉字转换成拼音首字母 首字母查 -- ========================== ...
- 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序（进程的虚拟存储器映像布局详解）
[翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .
- mysql更改已有数据表的字符集，保留原有数据内容
mysql更改已有数据表的字符集,保留原有数据内容 原文网址:http://blog.csdn.net/learn_2/article/details/6460370 环境:在应用开始阶段没有 ...
- Java面试宝典2015版
这套面试题主要目的是帮助那些还没有java软件开发实际工作经验,而正在努力寻找java软件开发工作的朋友在笔试时更好地赢得笔试和面试.由于这套面试题涉及的范围很泛,很广,很杂,大家不可能一天两天就看完 ...
- FJNU 1156 Fat Brother’s Gorehowl（胖哥的血吼）
FJNU 1156 Fat Brother’s Gorehowl(胖哥的血吼) Time Limit: 1000MS Memory Limit: 257792K [Description] [题目 ...
- JS——JavaScript Confirm
function show_confirm(){var r=confirm("Press a button!");if (r==true) { alert("You pr ...