clip：当内联内容溢出块容器时，将溢出部分裁切掉。

ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。

当块容器 <' overflow '> 为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符

要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。
我们将text-overflow生效必备的3个属性： <' overflow '> , <' width '> 和 <' white-space '> 都直接定义在了内联内容的父级块容器上
<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>text-overflow_CSS参考手册_web前端开发参考手册系列</title>

<style>

.test li{margin-top:10px;}

.test .clip p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:clip;}

.test .ellipsis p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}

</style>

</head>

<body>

<ul class="test">

    <li class="clip">

        <strong>clip: 直接将溢出的文字裁剪</strong>

        <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

    </li>

    <li class="ellipsis">

        <strong>ellipsis: 将溢出的文字显示省略标记（...）</strong>

        <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

    </li>

</ul>

</body>

</html>
方法（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

原文出处：http://gucong3000.github.io/css-book/properties/user-interface/text-overflow.htm

css3 文本超出后出现省略号的更多相关文章

  1. CSS3 文本超出后显示省略号...

    纯用CSS实现,主要采用代码 overflow:hidden; text-overflow:ellipsis;//这是让文本溢出后,显示成省略号. white-space:nowrap;//禁止自动换 ...

  2. CSS3文本超出容器显示省略号之text-overflow属性

    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 要想实现文本超出容器时显示省略号,上面3个属性必须同时搭配使用

  3. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  4. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  5. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  6. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  7. css兼容大部分浏览器的文本超出部分显示省略号

    css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...

  8. css-文本超出后显示省略号

    1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数 ...

  9. CSS控制文本超出后隐藏并用省略号代替

    一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...

随机推荐

  1. Android 使用LinearLayout.getChildAt(i)获取一个线性布局的view，并实现content中实现方法

    1.定义接口content的方法,如ok,cancle; 2.在View的处理类myview中实现content的方法. 3.通过contently.getChildAt(i)的方法获得View v; ...

  2. MySQL源码 数据结构hash

    MySQL源码自定义了hash表,因为hash表具有O(1)的查询效率,所以,源码中大量使用了hash结构.下面就来看下hash表的定义: [源代码文件include/hash.h mysys/has ...

  3. bzoj2125 3047

    仙人掌上的最短路,这里有详细的题解http://pan.baidu.com/s/1wzCpC我觉得讲的很清楚,不懂的见代码注释吧 type node=record po,next,num:longin ...

  4. 通过 Azure 媒体服务进行高速编码

    Milan Gada Azure 媒体服务首席项目经理  关于 Azure 媒体服务,客户问的最多的一个问题是能否进行高速编码.这个问题现在已经有了肯定的答案,目前有三种不同类型的 Encodin ...

  5. 微软开放技术发布针对 Mac 和 Linux 的更新版 Azure Node.JS SDK 和命令行工具

    发布于 2013-12-04 作者 Eduard Koller 这次为我们使用Linux 的朋友带来了更多关于部署云上虚拟机的消息.今天,微软开放技术有限公司 (MS Open Tech),想与大家分 ...

  6. （转载）Flash Number 数据类型

    (转载)http://www.g168.net/txt/flash/learningactionscript/00001183.html Number 数据类型 Number 数据类型是双精度浮点数. ...

  7. structs 源码示例

    http://blog.csdn.net/wwwihpccn/article/details/5725518

  8. python urllib2模块携带cookie

    今天干活遇到一个事.有一些网站的一些操作非得要求你登陆才能做,比如新浪微博,你要随便看看吧,不行,非得让你登陆了才能看,再比如一些用户操作,像更改自己的资料啦,个人的隐私啦巴拉巴拉的.想抓取这样的ur ...

  9. 我记录综合系统学习研究之用户管理五（如何利用wojilu打造一个全新的SNS应用）

    wojilu框架特别适合快速开发多用户分享内容应用,比如知乎,digg这类应用. 对于博客等用户程序,要有4个入口:1)用户展示入口(展示自己的应用) 2)用户后台管理入口(管理自己的应用) 3)聚合 ...

  10. bzoj 1027 [JSOI2007]合金（计算几何+floyd最小环）

    1027: [JSOI2007]合金 Time Limit: 4 Sec  Memory Limit: 162 MBSubmit: 2970  Solved: 787[Submit][Status][ ...