原文发布时间为：2009-09-16 —— 来源于本人的百度文章 [由搬家工具导入]

CSS中ellipsis()应用【转】

CSS手册中text-overflow属性的定义：

　　语法：
text-overflow : clip | ellipsis

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

说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

　　示例：
div { text-overflow : clip; }

　　text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对 搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式 text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

　　关于text-overflow属性如何应用，我们作如下的说明讲解：

　　text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想 要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow: hidden）。只有这样才能实现溢出文本显示省略号的效果。

　　我们首页建立了一个无序列表UL，里面有几个列表项LI，内部建立了列表链接A。我们的测试主要在LI在进行，请注意观察，看如下的三段代码：

　　一、仅定义text-overflow:ellipsis; 不能实现省略号效果。

<!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=gb2312" />
<title>it55</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="/">CSS实战精萃 - Pro CSS Techniques </a>
<li><a href="/">CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败</a>
<li><a href="/">CSS布局实例：CSS标签切换代码实例教程</a>
<li><a href="/">Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离</a>
<li><a href="/">解决IE7以下版本不支持无A状态伪类的几种方法！</a>
<li><a href="/">CSS去除表格td默认间距及制作1px细线表格 </a>
</ul>

</body>
</html>

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

<!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=gb2312" />
<title>it55</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="/">CSS实战精萃 - Pro CSS Techniques </a>
<li><a href="/">CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败</a>
<li><a href="/">CSS布局实例：CSS标签切换代码实例教程</a>
<li><a href="/">Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离</a>
<li><a href="/">解决IE7以下版本不支持无A状态伪类的几种方法！</a>
<li><a href="/">CSS去除表格td默认间距及制作1px细线表格 </a>
</ul>
</body>
</html>

三、按it55.com的教程，即本文所讲的方法，同时应用： 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=gb2312" />
<title>it55</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="/">CSS实战精萃 - Pro CSS Techniques </a>
<li><a href="/">CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败</a>
<li><a href="/">CSS布局实例：CSS标签切换代码实例教程</a>
<li><a href="/">Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离</a>
<li><a href="/">解决IE7以下版本不支持无A状态伪类的几种方法！</a>
<li><a href="/">CSS去除表格td默认间距及制作1px细线表格 </a>
</ul>
</body>
</html>

请您特别注意，text-overflow:ellipsis属性在FF中是没有效果的。

复制一下内容，直接拷贝到html文件中运行就可看到效果了
<html>
<head>
<style>
.text-overflow{
display:block;/*内联对象需加*/
width:200px;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.table{
width:300px;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
.table td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
</style>
</head>
<body>
<div class="text-overflow">

另外附上几条刚学到的页面设计的小经验
1、页面中talbe的宽设置为100%右边还是会留下一个滚动条的空白，可以在body标记里在加上：

<body style="overflow:auto">

2、
@font-face {font-family:comic;src:url(http://url/font.eot);}

可以定义一个在本地没有的字体名称，调用方法：
<span style="font-family:comic;">just cd boy!</span>

3、firefox的document.createElement不支持内容里有HTML标签,也不支持innerText，但是支持innerHTML,可以用innerHTML指定其内容。

当文字过长时裁剪（显示省略号或只裁剪 用CSS方法，不用程序）的更多相关文章

  1. 当td中文字过长时，显示为省略号

    当表格中的文字过长时,可选择已省略号显示.这里是用js实现的.首先获取td中的文字长度(innerText.length),如果长度超过了设定的长度,则截取内容,加上省略号显示.示例代码如下: $(f ...

  2. UILabel标签文字过长时的显示方式

    lineBreakMode:设置标签文字过长时的显示方式. label.lineBreakMode = NSLineBreakByCharWrapping; //以字符为显示单位显示,后面部分省略不显 ...

  3. iOS设置文字过长时的显示格式

    以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...

  4. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  5. CSS3：text-overflow实现文字截取，超出部分显示省略号

    1. 概述 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处, 一是不用通过后端程序截取: 二是有利于SEO. 2. text-overflow的属性 clip: 当对象 ...

  6. css文字两行或者几行显示省略号

    做这个省略的问题,突然发现显示省略号是有中英文区分的 我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了 width: 250px; overflow: hidden; ...

  7. 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法

    问题:jQuery easyUI中Datagrid,在表格数据加载无数据的时候,如何显示"无记录"的提示语? 解决jQuery EasyUI 1.5.1版本的Datagrid,在处 ...

  8. ant design table td 文字显示过长添加省略号、ant 文字过长时添加tootip提示

    方法1: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit ...

  9. 将td中文字过长的部分变成省略号显示的小技巧

    首先设置表格的样式table-layout:"fixed"再设置表格的宽度(这步必须) 最后再设置td样式的三个必要属性 代码如下: text-overflow: ellipsis ...

随机推荐

  1. 笔试算法题（46）：简介 - 二叉堆 & 二项树 & 二项堆 & 斐波那契堆

    二叉堆(Binary Heap) 二叉堆是完全二叉树(或者近似完全二叉树):其满足堆的特性:父节点的值>=(<=)任何一个子节点的键值,并且每个左子树或者右子树都是一 个二叉堆(最小堆或者 ...

  2. python 实现简单语音聊天机器人

    '''思路:使用百度的文本转音频API,将结果保存成mp3格式,并用mp3play库播放该文件.''' 1 # -*- coding:utf-8 -*- import sys import reque ...

  3. python 正则表达式与JSON字符串

    目录 正则表达式 概括单字符集 匹配单字符 匹配字符集 普通字符与元字符 元字符和普通的字符的混用 数量词{整数|*|+|?} 匹配指规则的字母 贪婪模式 匹配指定长度的字符串 非贪婪模式 匹配指定长 ...

  4. 使用U盘给笔记本重做系统

    **一.戴尔 Vostro 14 3000 Series **1. 开机时快速按F12进入BIOS界面 **2. 按照下图进行一系列的处理,把U盘被设置为第一启动项 **3. 插入U盘后进入老毛桃PE ...

  5. MQTT的学习之Mosquitto发布-订阅（2）

    在<MQTT的学习之Mosquitto安装&使用(1)>一文末尾,我已经模拟了发布-订阅模式,只是那时在服务器直接模拟的,并不是java代码模拟的.下面贴出Java代码 1.首先引 ...

  6. python3中文件的读与写

    Python open() 函数用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出错误 完整语法:open(file, mode='r', buf ...

  7. 使用 CAST

    使用 CAST: CAST ( expression AS data_type ) 使用 CONVERT: CONVERT (data_type[(length)], expression [, st ...

  8. readhat7.0 bond配置

    Bonding的模式一共有7种: 1.mode=0(balance-rr)(平衡抡循环策略) 概念:链路负载均衡,增加带宽,支持容错,一条链路故障会自动切换正常链路.交换机需要配置聚合口,思科叫por ...

  9. Kali 网络配置

    一.配置IP 编辑/etc/network/interfaces # This file describes the network interfaces available on your syst ...

  10. F#周报2019年第25期

    新闻 Azure Notebook概览 SpecFlow 3就在这里了! 使用新的Try .NET模版创建交互式文档 逐渐演化的.NET Core框架 Dylan与Linebreakers Oslo ...