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. 2-Babel

    一.什么是babel babel是一个源代码到源代码的转换器.比较广泛的用法就是可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良 ...

  2. mysql 修改数据库的列

    alter table tableName oldcolumn newcolumn datatype;

  3. Win7 winsock 注册表文件

    http://files.cnblogs.com/xsmhero/Winsock_Win7x64.rar

  4. 移除virbr0

    在我们使用虚拟机管理器的图形界面来安装虚拟机的时候,自动创建虚拟网桥和虚拟网卡.另外,我们很少会在一个虚拟机中再安装一个虚拟机,所以,我们可以将宿主机上的网桥删除.方法如下: # virsh net- ...

  5. git commit时message的问题

    1: 在执行git commit的时候,有两种办法为该commit添加message信息一种是git commit -m 'your message'另一种是git commit会打开commit-e ...

  6. python_way ,day2 字符串，列表，字典，时间模块

    python_way ,day2 字符串,列表,字典,自学时间模块 1.input: 2.0 3.0 区别 2.0中 如果要要用户交互输入字符串: name=raw_input() 如果 name=i ...

  7. iOS - Swift SingleClass 单例类

    前言 单例对象能够被整个程序所操作.对于一个单例类,无论初始化单例对象多少次,也只能有一个单例对象存在,并且该对象是全局的,能够被整个系统访问到. 单例类的创建 1.1 单例类的创建 1 单例类的创建 ...

  8. iOS - UITabBarController

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarController : UIViewController <UITabBarDelegate ...

  9. amd64_or_ia64?

    amd64 网上资料: 1. IA64是intel推出的架构,AMD64是AMD推出的.IA64不兼容原有的32位x86架构指令集,后来被证明这种做法是不成功的,于是Intel发展处IA64e架构,对 ...

  10. Python学习（5）条件语句

    目录 Python 条件语句 Python 简单的语句组 Python 条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了 ...