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. .NetDOM操作--un

    DOM操作操作相关元素:里:children(),find("选择器")外:parent(),parents("选择器")下:next(),nextAll(选择 ...

  2. Flip Game poj1753

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32961   Accepted: 14407 Description Fli ...

  3. HashCheck

    https://github.com/gurnec/HashCheck

  4. CSRF的防御实例（PHP）

    CSRF的防御可以从服务端和客户端两方面着手,防御效果是从服务端着手效果比较好,现在一般的CSRF防御也都在服务端进行. 1.服务端进行CSRF防御 服务端的CSRF方式方法很多样,但总的思想都是一致 ...

  5. 第五章 consul key/value

    1.key/value作用 动态修改配置文件 支持服务协同 建立leader选举 提供服务发现 集成健康检查 2.使用 2.1.查看全部key/value 说明: 使用?recurse参数来指定查看多 ...

  6. 最大后验估计 -- Maximum-a-Posteriori (MAP) Estimation

    最大后验估计是根据经验数据获得对难以观察的量的点估计.与最大似然估计类似,但是最大的不同时,最大后验估计的融入了要估计量的先验分布在其中.故最大后验估计可以看做规则化的最大似然估计.

  7. C#正则表达式编程（三）：Match类和Group类用法

    前面两篇讲述了正则表达式的基础和一些简单的例子,这篇将稍微深入一点探讨一下正则表达式分组,在.NET中正则表达式分组是用Match类来代表的.首先先看一段代码: /// <summary> ...

  8. SAS Annotated Output GLM

    SAS Annotated Output GLM   在使用SAS过程中,proc glm步输出离差平方和有4种算法,分别是SS1 SS2 SS3 SS4 下面文章介绍了其中SS3的具体计算步骤和例子 ...

  9. Nexus4_屏幕截图目录

    1. /sdcard/Pictures/Screenshots/ 2. 3.

  10. Android_相关路径

    1. Android应用安装涉及到如下几个目录:system/app   系统自带的应用程序,无法删除.data/app      用户程序安装的目录,有删除权限.安装时把apk文件复制到此目录.da ...