语法： 
　　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. Asp.Net MVC中DropDownListFor的用法

    在Asp.Net MVC中可以用DropDownListFor的方式来让用户选择已定列表中的一个数值.用法不复杂,这里简单做一个记录. 首先我们要定义一个 Model ,用户在 DropDownLis ...

  2. ObCallback回调钩子检测

    ObCallback回调钩子检测 2013-12-20 Nie.Meining Ring0 在 PatchGuard 的摧残下,通过 ObRegisterCallbacks 函数注册回调钩子已经成了 ...

  3. 遍历CallBack对象 和 HHIVE对象

    内核中有个PLIST_ENTRY CmpHiveListHead;CmpHiveListHead = &CMHIVE.HiveList; CMHIVE结构如下:kd> dt _CMHIV ...

  4. h5嵌入视频遇到的bug及总结---转载

    最近做的一个h5活动因为嵌入视频而发现了好多以前从未发现的问题,在测试的时候不同系统不同版本不同环境等多多少少都出现了些问题,搞得我也是焦头烂额的,不过好在最终问题都解决了,自己也学到了好多东西,为了 ...

  5. java导出word的6种方式（复制来的文章）

    来自: http://www.cnblogs.com/lcngu/p/5247179.html 最近做的项目,需要将一些信息导出到word中.在网上找了好多解决方案,现在将这几天的总结分享一下. 目前 ...

  6. hdu 1573 X问题 不互质的中国剩余定理

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  7. 《DSP using MATLAB》示例Example4.14

    代码: b = [1]; a = [1, -1.5, 0.5]; % [R, p, C] = residuez(b,a) Mp = (abs(p))' Ap = (angle(p))'/pi % ch ...

  8. css:删除：×的效果

    常常要使用的显示删除效果: DEMO

  9. Asp.net mvc 有关序列化的问题

    //            $.ajax({//                async: false,//                type:'post',//这里注意,Get请求不安全,用 ...

  10. URAL1996 Cipher Message 3（KMP + FFT）

    题目 Source http://acm.timus.ru/problem.aspx?space=1&num=1996 Description Emperor Palpatine has be ...