语法： 
　　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. POJ——3264线段树

    题目: 输入两个数(m,n),m表示牛的头数,n表示查询的个数.查询时输入两个数(x,y),表示查询范围的起始值和终止值,查询结果是,这个区间内牛重量的最大值减去牛重量的最小值,数量级为1000,00 ...

  2. java基础之——类的初始化顺序

    由浅入深,首先,我们来看一下,一个类初始化有关的都有些啥米: 静态成员变量.静态代码块.普通成员变量.普通代码块.构造器.(成员方法?貌似跟初始化没有啥关系) 现在我们来看看她们的初始化顺序, 从性质 ...

  3. sql修改约束语法练习

    --以系统管理员身份登录到SQL Server服务器,并使用T-SQL语句实现以下操作:--1. 将stu数据库中student表的sno定义为主键:alter table [student] add ...

  4. poj 1651 Multiplication Puzzle (区间dp)

    题目链接:http://poj.org/problem?id=1651 Description The multiplication puzzle is played with a row of ca ...

  5. [xsd学习]复合元素

    对于xsd,复合元素的定义有两种方式: 一.在元素内部直接声明,此种方法只能此元素使用 <xs:element name="employee"> <xs:comp ...

  6. 得到UIView中某个非子视图在UIView中的位置

    使用 convertRect: fromView: 或者 convertRect: toView:例如一个视图控制器的view中有一个UITableView,UITableView的某个cell中有个 ...

  7. 关于__IPHONE_OS_VERSION_MAX_ALLOWED和__IPHONE_OS_VERSION_MIN_ALLOWED的用法

    简单来说, 这些编译期常量, 对运行时的环境判断完全无效, 它告诉编译器用哪一段代码来进行编译, 那那段代码里, 你仍然可以写运行到目标机器里会崩溃的代码, 从stackoverflow里拷两段示例代 ...

  8. Servlet 获取 ApplicationContext

    一般使用Spring完成了注入,在Service或SpringMVC 中可以通过注解的形式来获取 Spring的已经注入的Spring的bean如下所示: @Resource(name = " ...

  9. tomcat 部署spring工程乱码解决方案

    tomcat的server.xml文件,Connector标签增加useBodyEncodingForURI="true"属性 web.xml如下配置 <filter> ...

  10. document.images、document.forms、doucument.links——>HTMLCollection

    由于历史原因,HTMLDocument类定义了一些快捷属性来访问各种各样的节点.例如,images.forms.links等属性指向香味类似只读数组的<img>.<form>. ...