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. HDU 5615 Jam's math problem

    Jam's math problem Problem Description Jam has a math problem. He just learned factorization.He is t ...

  2. 如何用linux远程登录windows计算机

    大家可能试过用windows远程登录另一个windows pc机,今天大家将会学到如何用 linux远程登录你的windows系统. 首先大家要做到得救是将自己linux和windows操作机的IP地 ...

  3. SQL Server 2005 中的同义词

    From : http://blog.csdn.net/itblog/article/details/752881 =============创建同义词 可以为下列对象类型创建同义词: 程序集 (CL ...

  4. SQL SERVER分区表

    简介 分区表是在SQL SERVER2005之后的版本引入的特性.这个特性允许把逻辑上的一个表在物理上分为很多部分.而对于SQL SERVER2005之前版本,所谓的分区表仅仅是分布式视图,也就是多个 ...

  5. 使用一个封装的json删除方法

    <!-- 前台js代码:其实现的目的:利用异步的封装方法实现增删改操作!--> <script type="text/javascript"> functi ...

  6. QQReg.java

    import java.awt.*; import javax.swing.*; public class QQReg extends JFrame{ public static void main( ...

  7. [转载] 每个 Python 程序员都要知道的日志实践

    原文: http://python.jobbole.com/81666/ 在现实生活中,记录日志非常重要.银行转账时会有转账记录:飞机飞行过程中,会有黑盒子(飞行数据记录器)记录飞行过程中的一切.如果 ...

  8. java SE (java Standard Edition)

    14.10.22 学习java SE的Object: -------------------------------------15.11.18----

  9. Json知识总结

    JSON对象是一个无序的"名称/值"对的集合它开始于“{”,结束于“}”.每一个属性名和值间用“:”提示,属性间用“,”分隔.一个数组开始于"[",结束于&qu ...

  10. WCF入门教程（vs2010）

    这几天挺别人提起WCF,鄙人之前只知道WPF,对WCF这个东东不甚了解,经过查阅网上的资料略有所得,和大家交流一下. 首先WCF是什么? Windows Communication Foundatio ...