语法： 
　　text-overflow : clip | ellipsis

参数： 
　　clip : 　不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）
      ellipsis : 　当对象内文本溢出时显示省略标记（...）

text-overflow
我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。假如用标题截取函数，则标题不是完整的，假如我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。但是注意下面情况：
一、仅定义text-overflow:ellipsis; 不能实现省略号效果。

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

三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

ul {

    width:300px;

    margin:30px auto;

}

li {

    line-height:25px;

    text-overflow:ellipsis;

    white-space:nowrap;

    overflow:hidden;

}

a {

    color:#03c;

    font-size:14px;

}

a:hover {

    color:#333;

}

</style>

</head>

<body>

<ul>

  <li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>

  <li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>

  <li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>

  <li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>

  <li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>

</ul>

</body>

</html>

　　
　　

　　

ellipsis的更多相关文章

  1. python中的Ellipsis

    ...在python中居然是个常量 print(...) # Ellipsis 看别人怎么装逼 https://www.keakon.net/2014/12/05/Python%E8%A3%85%E9 ...

  2. 多行文本溢出显示省略号(…) text-overflow: ellipsis

    详解text-overflow 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: clip:当 ...

  3. css text-overflow:ellipsis 文字多余剪切

    text-overflow: ellipsis;多度剪切white-space: nowrap;禁止换行overflow: hidden;多余隐藏

  4. 关于ellipsis多行换行的方案

    WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...

  5. CSS中的text-overflow:clip|ellipsis的使用

    如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...,可以使用text-overflow:clip|ellipsis 基本语法:text-over ...

  6. text-overflow:ellipsis

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...

  7. CCS3属性之text-overflow:ellipsis;的用法和注意之处

    语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsi ...

  8. text-overflow:ellipsis实现超出隐藏时省略号显示

    text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-s ...

  9. CSS基础：text-overflow:ellipsis溢出文本

    <!DOCTYPE html><html> <head> <title> new document </title> <meta na ...

随机推荐

  1. I/O复用模型之select学习

    linux下的I/O模型可以分为5种: 1.阻塞式I/O模型 2.非阻塞式I/O模型 3.I/O复用模型 4.信号驱动I/O模型 5.异步I/O模型 简单解释: 阻塞和非阻塞:就是说需要做一件事的时候 ...

  2. SQL连接查询、变量、运算符、分支、循环语句

    连接查询:通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join   on 2.union 在关系数据库 ...

  3. 使用while代替for循环的几个习题

    1:兔子问题 2:100以内质数的和 3:单位给发了一张150元购物卡,拿着到超市买三类洗化用品.洗发水15元,香皂2元,牙刷5元.求刚好花完150元,有多少种买法,没种买法都是各买几样? 总结:wh ...

  4. HDU 4162 Shape Number （最小表示法）

    题意:给你一串n个数,求出循环来看一阶差的最小字典序:数字串看成一个顺时针的环,从某一点开始顺时针循环整个环,保证字典序最小就是答案 例如给你 2 1 3 就会得到(1-2+8 注意题意负数需要加8) ...

  5. Android 编程下的自定义 xmlns

    什么是 xmlns xmlns是 XML Namespaces 的缩写,中文名称是 XML命名空间. xmlns 使用规则 xmlns:namespace-prefix="namespace ...

  6. 我的DbHelper数据操作类

    其实,微软的企业库中有一个非常不错的数据操作类了.但是,不少公司(起码我遇到的几个...),对一些"封装"了些什么的东西不太敢用,虽然我推荐过微软的企业库框架了...但是还是要&q ...

  7. ASP.NET MVC3 中整合 NHibernate3.3、Spring.NET2.0 时 Session 关闭问题

    一.问题描述 在向ASP.NET MVC中整合NHibernate.Spring.NET后,如下管理员与角色关系: 类public class Admin { public virtual strin ...

  8. Hive 实现HBase 数据批量插入

    HBase 数据的插入可以使用Java API 来写Java 程序逐条倒入,但是不是很方便.利用Hive自带的一个Jar包,可以建立Hive和HBase的映射关系 利用Hive 的insert可以将批 ...

  9. （转）yarn 集群部署，遇到的问题小结

    link:http://blog.csdn.net/uniquechao/article/details/26449761   版本信息: hadoop 2.3.0  hive 0.11.0   1. ...

  10. BZOJ 2733 & splay的合并

    题意: 带权联通块,添边与查询联通块中第k大. SOL: splay合并+并查集. 我以为splay可以用奇技淫巧来简单合并...调了一下午终于幡然醒悟...于是就只好一个一个慢慢插...什么启发式合 ...