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实现超出隐藏时省略号显示的更多相关文章

  1. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  2. css 实现div内显示两行或三行，超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  3. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  4. CSS多行文字超出隐藏加省略号

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...

  5. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  6. Div里超出部分，省略号显示

    1.一行显示并出现省略号 1)三个属性: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidde ...

  7. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  8. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  9. css 超出部分以省略号的形式显示

    想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度,然后添加以下属性 overflow: hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/*超出 ...

随机推荐

  1. xtrabackup 安装、备份、还原及错误处理 教程

    xtrabackup 是MYSQL的一个备份软件 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个 ...

  2. Java IO流整理Rick

    Java 流IO部分: Console 控制台信息读取// ----------- Console Begin // ------------ 部分代码  Console cons ;  char[] ...

  3. 【Unity3D游戏开发】之Sprite Packer使用方法 (九)[转]

    前置说明: 我们用来做sprite 的图片,通常会留有很多空白的地方,我们在画完了sprite之后,这些地方很可能就没有什么作用了.如果想避免这些资源上的浪费,我们可以把各个sprite做成图集,把图 ...

  4. [HDOJ5938]Four Operations（暴力，DFS）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5938 题意:给出一个长度最大是2020的数字串, 你要把数字串划分成55段, 依次填入'+', '-' ...

  5. Sencha Toucha之Ext.Ajax

    Ext.Ajax是Ext.data.Connection的hi一个单实例,不需要使用new或者Ext.create方法创建实例后再使用. 类的继承关系为: Ext.Base Ext.data.Conn ...

  6. linux远程XP

    众所周知XP下有"远程桌面连接"用来远程登录桌面,设置也非常简单. 那有没有什么办法在linux下远程登录到XP呢?有.用rdesktop这个linux下的软件就能实现. 发现新立 ...

  7. 未能加载文件或程序集xxx或它的某一个依赖项 试图加载格式不正确的程序

    解决方案:IIS——应用程序池——高级设置——启用32位应用程序 :true.

  8. hdu 5167 Fibonacci 打表

    Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Proble ...

  9. JS学习笔记（四） 正则表达式（RegExp对象）

    参考资料: 1. http://www.w3school.com.cn/js/js_obj_regexp.asp ☂ 知识点: ☞ RegExp是正则表达式的缩写. ☞ RegExp是一种模式,用于在 ...

  10. HTML笔记（四） 框架

    通过框架,可以在一个窗口显示多个页面.而所谓的框架,就是指每一份HTML文档. 框架结构标签<frameset> 定义如何将窗口分割为框架. frameset定义了一系列的行列. rows ...