语法： 
　　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. Codeforces Round #130 (Div. 2) C. Police Station

    题目链接:http://codeforces.com/contest/208/problem/C 思路:题目要求的是经过1~N的最短路上的某个点的路径数 /  最短路的条数的最大值.一开始我是用spf ...

  2. AndroidStudio里面怎么取消与SVN的关联

    在公司做项目 遇到SVN解除关联的问题 后经过解决: 1.解除文件的关联方法: 1.1. 创建一个reg文件 如下 1.2 在文件中填入如下内容并保存: Windows Registry Editor ...

  3. 让Web API支持$format参数的方法

    public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web AP ...

  4. 常用eclipse 快捷键

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  5. JavaScript设计模式——单体模式

    一:单体模式简介: 是什么:将代码组织为一个逻辑单元,这个单元中的代码通过单一的变量进行访问.只要单体对象存在一份实例,就可以确信自己的所有代码使用的是同样的全局资源. 用途:1.用来划分命名空间,减 ...

  6. 记一次小团队Git实践(上)

    公司规模不大,成立之初,选择了svn作为版本控制系统.这对于用惯了git的我来说,将就了一段时间后,极为不爽,切换到git-svn勉强能用.随后,因为产品需要发布不同的版本,而git-svn对远程分支 ...

  7. hdu3709 Balanced Number (数位dp+bfs)

    Balanced Number Problem Description A balanced number is a non-negative integer that can be balanced ...

  8. DSP using MATLAB 示例 Example3.10

    用到的性质 上代码: n = -5:10; x = rand(1,length(n)) + j * rand(1,length(n)); k = -100:100; w = (pi/100)*k; % ...

  9. Wiki上的Ue4文件结构以及命名规范

    https://wiki.unrealengine.com/Assets_Naming_Convention

  10. 【原】iOS多线程之异步任务+并行队列情况与异步任务+串行队列（主队列）情况

    异步任务+并行队列 把异步任务放到并行队列进行执行,异步任务会在不同的线程中执行. /*异步执行+并行队列*/ - (IBAction)clickBasic1:(UIButton *)sender { ...